Bootstrap嵌套List-group异常：点击后同时显示多个子标签项

你的问题出在中间层级的导航链接没有和上层的Home/Profile标签页做绑定，加上页面存在重复ID（list-tab被用了两次），导致Bootstrap的tab组件无法正确控制Link1和Link2的显示隐藏。按照以下修改就能实现预期逻辑：

修正后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">
  <div class="col-4">
    <div class="list-group" id="main-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">
      <!-- Home对应的tab面板，仅显示Link1 -->
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
        <div class="list-group" role="tablist">
          <a class="list-group-item list-group-item-action" id="list-home-page" data-toggle="tab" href="#aa" role="tab" aria-controls="a">
            Link 1
          </a>
        </div>
      </div>
      <!-- Profile对应的tab面板，仅显示Link2 -->
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
        <div class="list-group" role="tablist">
          <a class="list-group-item list-group-item-action" id="list-profile-page" data-toggle="tab" href="#bb" role="tab" aria-controls="b">
            Link 2
          </a>
        </div>
      </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="list-home-page">
    Page 1
  </div>
  <div class="tab-pane fade" id="bb" role="tabpanel" aria-labelledby="list-profile-page">
    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>

关键修改说明 #

• 把原来重复的id="list-tab"改成唯一的id="main-list-tab"，避免ID冲突导致组件失效
• 为Home和Profile分别创建独立的tab-pane容器，将Link1和Link2分别放入对应的容器中，这样切换上层标签时只会显示对应容器内的链接
• 修正了aria-labelledby属性，让辅助标签和对应的控件正确关联，提升可访问性
• 给中间层级的链接加上list-group-item list-group-item-action类，保持Bootstrap样式一致性

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