我正在嘗試使用引導列表組類在HTML中創建一個頁面導航功能。

該功能應該如何工作:

當我單擊主頁時，僅顯示鏈接1，當我進一步單擊鏈接1時，僅顯示第1頁。

同樣，當我單擊Profile時，只顯示鏈接2，當我進一步單擊鏈接2時，顯示第2頁。

鏈接工作正常，并顯示正確的項目。

問題是，當我點擊主頁鏈接或個人資料鏈接時，鏈接1和鏈接2同時出現。

謝謝！

<link rel="stylesheet"  integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="list-group" id="list-tab" role="tablist">
        <a id="list-home-page" data-toggle="tab" href="#aa" role="tab" aria-controls="a">
        Link 1
        </a>
        <a id="list-profile-page" data-toggle="tab" href="#bb" role="tab" aria-controls="b">
        Link 2
        </a>
      </div>
    </div>
  </div>
</div>
<br><br>

<div class="tab-content" id="nav-tabPage">
  <div class="tab-pane fade show active" id="aa" role="tabpanel" aria-labelledby="aa">
    Page 1
  </div>
  <div class="tab-pane" id="bb" role="tabpanel" aria-labelledby="bb">
    Page 2
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

看著你的代碼，似乎你在創建這個導航的時候混淆了兩個概念。

通常list-group和list-group-item在無序列表元素中使用，如下所示

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
</ul>

雖然如果您愿意，您仍然可以使用相同的HTML元素(ul和li ),但是當您想要使用bootstrap進行導航時，您必須更改bootstrap中的類。

這不僅僅是風格上的影響，而且使用的一些JS也會有所不同。

示例:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

我建議從本節開始查閱文檔(下面的鏈接),并重構代碼以匹配。

Bootstrap 4選項卡- JavaScript行為

現在，如果你希望用戶停留在一個頁面上，但是在這個頁面上顯示不同層次的內容，我通常會建議使用標簽。如果您正在尋找頁面之間的導航，如

example.com/home ../關于 ../聯系人 請考慮使用導航欄。

引導4 -導航條

我要警告的一件事是，不要從文檔中復制代碼，然后簡單地插入您想要的值。這可能有用，但不會教給你任何東西。