Bootstrap List Group嵌套链接首次点击后失效问题排查求助

问题 #

使用Bootstrap List-group实现嵌套导航功能时，二级链接（Link 1、Link 2）仅首次点击能正常跳转，后续点击完全无响应。预期的导航逻辑是：

• 点击「Home」显示「Link 1」，点击「Link 1」展示「Page 1」
• 点击「Profile」显示「Link 2」，点击「Link 2」展示「Page 2」

原实现代码：

<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="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="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home">
        <div class="list-group" id="link-tab">
          <a class="list-group-item" data-toggle="tab" href="#aa" role="tab" aria-controls="a">
            Link 1
          </a>
        </div>
      </div>

      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile">
        <div class="list-group" id="link-tab">
          <a class="list-group-item" 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="aa">
   Page 1
  </div>
  <div class="tab-pane fade" 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>

问题定位与修复 #

核心问题 #

1. 重复ID冲突：两个二级列表容器都使用了id="link-tab"，HTML规范中ID必须全局唯一。重复ID会导致Bootstrap的Tab组件无法正确绑定事件，首次点击后事件监听逻辑混乱，后续点击失效。
2. 二级链接缺少交互类：二级链接未添加list-group-item-action类，既没有正确的交互样式，也会影响Bootstrap对可点击元素的事件识别。

修复后的代码 #

<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="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="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home">
        <div class="list-group" id="link-tab-home">
          <a class="list-group-item list-group-item-action active" data-toggle="tab" href="#aa" role="tab" aria-controls="a">
            Link 1
          </a>
        </div>
      </div>

      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile">
        <div class="list-group" id="link-tab-profile">
          <a class="list-group-item list-group-item-action" 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="aa">
   Page 1
  </div>
  <div class="tab-pane fade" 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>

<script>
// 切换一级Tab时，自动激活对应二级链接并切换页面
$('#list-tab a').on('shown.bs.tab', function(e) {
  const targetTab = $(e.target).attr('href');
  if (targetTab === '#list-home') {
    $('#link-tab-home a').tab('show');
  } else if (targetTab === '#list-profile') {
    $('#link-tab-profile a').tab('show');
  }
});
</script>

修复说明 #

1. 唯一ID：将两个二级列表容器的ID分别改为link-tab-home和link-tab-profile，避免ID冲突。
2. 添加交互类：给二级链接加上list-group-item-action类，确保可点击样式和事件识别。
3. Tab联动逻辑：通过监听一级Tab的shown.bs.tab事件，切换一级Tab时自动激活对应二级链接并跳转至目标页面，完全匹配预期导航逻辑。

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