Html Bootstrap 5:左侧导航菜单无法正常工作_Html_Bootstrap 4

Html Bootstrap 5:左侧导航菜单无法正常工作

html bootstrap-4

Html Bootstrap 5:左侧导航菜单无法正常工作,html,bootstrap-4,Html,Bootstrap 4,我有以下代码： <?php $page_title = 'Welcome to JPR Technology'; include('./includes/header.html'); ?> <body> <div class="d-flex align-items-start mt-5 ms-5"> <div class="nav flex-column nav-pills me-3&qu

我有以下代码：

<?php
  $page_title = 'Welcome to JPR Technology';
  include('./includes/header.html');
?>

  <body>

    <div class="d-flex align-items-start mt-5 ms-5">
      <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="fa fa-home"></i> Home</button>
        <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false"><i class="fa fa-calculator"></i> Calculator</button>
        <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false"><i class="fa fa-calendar"></i> Date Form</button>
        <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false"><i class="fa fa-database"></i> Register</button>
      </div>
      <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade show active ms-5" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" data-toggle="button">
         <img class="d-block mx-auto mb-4" src="./assets/home.svg" alt="" width="72" height="57">
         <h4>Home Page</h4>
          <p>Welcome to JPR Technology Projects Ltd.</p>
          <?php
            include('./includes/footer.php');
          ?>
        </div>
        <div class="tab-pane fade ms-5" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" data-toggle="button">
          <img class="d-block mx-auto mb-4" src="./assets/calculator.svg" alt="" width="72" height="57">
          <?php
            include('./calculator.php');
          ?>
        </div>
        <div class="tab-pane fade ms-5" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" data-toggle="button">
          <img class="d-block mx-auto mb-4" src="./assets/calendar.svg" alt="" width="72" height="57">
          <?php
            include('./dateform.php');
          ?>
        </div>
        <div class="tab-pane fade ms-5" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" data-toggle="button">
          <img class="d-block mx-auto mb-4" src="./assets/database.svg" alt="" width="72" height="57">
          <?php
            include('./register.php');
          ?>
        </div>
      </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="http://localhost:8082/bootstrap-5.0.0-beta2/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

  </body>
</html>


家
计算器
日期表
登记
主页
欢迎来到JPR科技项目有限公司

这是我的屏幕最初的样子：

但当我从一个选项卡导航到另一个选项卡时，上一页无法正确清除：

修复引导链接

<?php
  $page_title = 'Welcome to JPR Technology';
  include('./includes/header.html');
?>
<head>
  <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
  <body>

    <div class="d-flex align-items-start mt-5 ms-5">
      <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="fa fa-home"></i> Home</button>
        <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false"><i class="fa fa-calculator"></i> Calculator</button>
        <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false"><i class="fa fa-calendar"></i> Date Form</button>
        <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false"><i class="fa fa-database"></i> Register</button>
      </div>
      <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade show active ms-5" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" data-toggle="button">
         <img class="d-block mx-auto mb-4" src="./assets/home.svg" alt="" width="72" height="57">
         <h4>Home Page</h4>
          <p>Welcome to JPR Technology Projects Ltd.</p>
          <?php
            include('./includes/footer.php');
          ?>
        </div>
        <div class="tab-pane fade ms-5" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" data-toggle="button">
          <img class="d-block mx-auto mb-4" src="./assets/calculator.svg" alt="" width="72" height="57">
          <?php
            include('./calculator.php');
          ?>
        </div>
        <div class="tab-pane fade ms-5" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" data-toggle="button">
          <img class="d-block mx-auto mb-4" src="./assets/calendar.svg" alt="" width="72" height="57">
          <?php
            include('./dateform.php');
          ?>
        </div>
        <div class="tab-pane fade ms-5" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" data-toggle="button">
          <img class="d-block mx-auto mb-4" src="./assets/database.svg" alt="" width="72" height="57">
          <?php
            include('./register.php');
          ?>
        </div>
      </div>
    </div>

    <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

  </body>
</html>


家
计算器
日期表
登记
主页
欢迎来到JPR科技项目有限公司

My Bootstrap链接实际上是包含的PHP代码的一部分。包含的PHP包含一个包含引导链接的标头。