Bootstrap嵌套List-group中tab-content链接首次点击后失效问题排查

问题描述 #

使用Bootstrap嵌套list-group构建页面导航，预期逻辑：

• 点击Home加载Link 1，点击Profile加载Link 2
• 点击Link 1加载Page 1，点击Link 2加载Page 2

实际问题：id为nav-tabContent的div内的Link 1、Link 2仅首次点击有效，再次点击完全失效，需刷新页面才能恢复。

页面UI #

原始代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" 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="list" 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="list" 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="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
        <a id="list-home-page" data-toggle="list" href="#aa" role="tab" aria-controls="a">
        Link 1
        </a>
      </div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
        <a id="list-profile-page" data-toggle="list" href="#bb" role="tab" aria-controls="b">
        Link 2
        </a>
      </div>
    </div>
    <br><br>
    <div class="tab-content" id="nav-tabPage">
      <div class="tab-pane" id="aa" role="tabpanel" aria-labelledby="list-home-page">
       Page 1
      </div>
    <div class="tab-pane" id="bb" role="tabpanel" aria-labelledby="list-profile-page">
       Page 2
    </div>
   </div>
  </div>
</div>

问题原因与修复方案 #

1. Bootstrap版本属性不匹配：
   你使用的是Bootstrap 5.2.0，但代码中仍在使用Bootstrap 3/4的data-toggle="list"属性，Bootstrap 5已将所有data属性前缀改为bs-，需替换为data-bs-toggle="list"。

2. 嵌套tab状态未重置：
   切换父tab（Home/Profile）时，子tab（Link1/Link2）的激活状态未被清理，导致二次点击时无法触发新的切换事件。需要在父tab切换时，重置子tab的激活状态。

修复后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<script>
// 父tab切换时重置子tab状态
document.getElementById('list-tab').addEventListener('shown.bs.tab', function(e) {
  // 清空子tab的激活状态
  const activeSubTab = document.querySelector('#nav-tabPage .tab-pane.show.active');
  if (activeSubTab) {
    activeSubTab.classList.remove('show', 'active');
  }
});
</script>

<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-bs-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" 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="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
        <a class="list-group-item list-group-item-action" id="list-home-page" data-bs-toggle="list" href="#aa" role="tab" aria-controls="a">
        Link 1
        </a>
      </div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
        <a class="list-group-item list-group-item-action" id="list-profile-page" data-bs-toggle="list" href="#bb" role="tab" aria-controls="b">
        Link 2
        </a>
      </div>
    </div>
    <br><br>
    <div class="tab-content" id="nav-tabPage">
      <div class="tab-pane" id="aa" role="tabpanel" aria-labelledby="list-home-page">
       Page 1
      </div>
    <div class="tab-pane" id="bb" role="tabpanel" aria-labelledby="list-profile-page">
       Page 2
    </div>
   </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Vakindu