Bootstrap tab-content内链接首次点击后失效问题排查求助

问题描述 #

使用Bootstrap的list-group组件实现嵌套导航时，发现tab-content内的链接仅首次点击有效，再次点击无响应，必须刷新页面才能恢复。代码如下：

<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">
          A
          </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">
          B
          </a>
        </div>
      </div>
    </div>
  </div>
  <br><br>
  <div class="tab-content" id="nav-tabPage">
  <div class="tab-pane" id="aa" role="tabpanel" aria-labelledby="list-home-page">
    New A
  </div>
  <div class="tab-pane" id="bb" role="tabpanel" aria-labelledby="list-profile-page">
    New B
  </div>
  </div>

问题原因 #

Bootstrap的tab组件默认会将所有带有data-toggle="list"的元素纳入同一事件上下文管理。你这里存在两组独立的tab切换逻辑：

• 上层：#list-tab控制#nav-tabContent的显示
• 下层：#list-home-page/#list-profile-page控制#nav-tabPage的显示
  但未给下层的tab触发元素指定独立的目标容器，导致Bootstrap将两组tab逻辑混淆。切换上层tab后，下层触发元素的激活状态和事件绑定被干扰，无法再次触发切换。

修复方案 #

给下层的tab触发元素添加data-target（Bootstrap 4）或data-bs-target（Bootstrap 5）属性，明确指定其控制的tab容器，让Bootstrap区分不同的tab组。

修正后代码（Bootstrap 5版本）

<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">
          <!-- 指定控制的tab容器 -->
          <a id="list-home-page" data-bs-toggle="list" href="#aa" role="tab" aria-controls="a" data-bs-target="#nav-tabPage">
          A
          </a>
        </div>
        <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
          <a id="list-profile-page" data-bs-toggle="list" href="#bb" role="tab" aria-controls="b" data-bs-target="#nav-tabPage">
          B
          </a>
        </div>
      </div>
    </div>
  </div>
  <br><br>
  <div class="tab-content" id="nav-tabPage">
  <div class="tab-pane" id="aa" role="tabpanel" aria-labelledby="list-home-page">
    New A
  </div>
  <div class="tab-pane" id="bb" role="tabpanel" aria-labelledby="list-profile-page">
    New B
  </div>
  </div>

说明

• 若使用Bootstrap 4，只需将data-bs-toggle替换为data-toggle，data-bs-target替换为data-target即可。
• 确保每个tab触发元素的href与对应tab-pane的id完全匹配，aria-controls和aria-labelledby属性保持对应，保证语义化和功能正常。

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