Bootstrap5 多组nav控制同一tab-content 激活状态同步问题

适配Bootstrap5的多导航同步激活解决方案 #

直接在原有Bootstrap资源引入后追加如下JS代码即可实现需求：同一模块内多个导航组绑定同个tab内容池时，点击任意一组的导航选项，其他组的已激活状态会自动取消，且多个独立模块之间互不干扰。

document.addEventListener('DOMContentLoaded', function () {
  // 监听所有pill导航的激活事件
  document.querySelectorAll('[data-bs-toggle="pill"]').forEach(tabTrigger => {
    tabTrigger.addEventListener('shown.bs.tab', function (e) {
      // 获取当前激活的tab对应的内容面板ID
      const activeTarget = e.target.getAttribute('data-bs-target');
      // 锁定当前触发事件所属的模块，避免多模块之间互相干扰
      const currentModule = e.target.closest('.MyTabPillsOne');
      // 清空当前模块下所有导航的激活状态
      currentModule.querySelectorAll('[data-bs-toggle="pill"]').forEach(trigger => {
        trigger.classList.remove('active');
        trigger.setAttribute('aria-selected', 'false');
      });
      // 给当前指向激活面板的导航按钮设置激活状态
      currentModule.querySelector(`[data-bs-target="${activeTarget}"]`).classList.add('active');
      currentModule.querySelector(`[data-bs-target="${activeTarget}"]`).setAttribute('aria-selected', 'true');
    });
  });
});

可选优化（不影响功能运行）

现有HTML里两个导航组使用了重复的id="pills-tab"，不符合HTML规范，可以分别修改为id="pills-tab-1"和id="pills-tab-2"即可。

完整可运行示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多导航同步示例</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="MyTabPillsOne container mt-4">
  <div class="hr-text hr-text-left m-t-2 m-b-1">
    <h6><strong>List 1</strong></h6>
  </div>
  <div class="nav nav-pills mb-3" id="pills-tab-1" role="tablist">
      <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#tab-1" type="button" role="tab" aria-controls="tab-1" aria-selected="true">1</button>
      <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-2" type="button" role="tab" aria-controls="tab-2" aria-selected="false">2</button>
      <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-3" type="button" role="tab" aria-controls="tab-3" aria-selected="false">3</button>
  </div>

  <div class="hr-text hr-text-left m-t-2 m-b-1">
    <h6><strong>List 2</strong></h6>
  </div>
  <div class="nav nav-pills mb-3" id="pills-tab-2" role="tablist">
      <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-a" type="button" role="tab" aria-controls="tab-a" aria-selected="false">a</button>
      <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-b" type="button" role="tab" aria-controls="tab-b" aria-selected="false">b</button>
      <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-c" type="button" role="tab" aria-controls="tab-c" aria-selected="false">c</button>
  </div>

  <div class="tab-content">
    <div class="tab-pane active" id="tab-1">
      <h1>1</h1>
    </div>
    <div class="tab-pane" id="tab-2">
      <h1>2</h1>
    </div>
    <div class="tab-pane" id="tab-3">
      <h1>3</h1>
    </div>
    <div class="tab-pane" id="tab-a">
      <h1>A</h1>
    </div>
    <div class="tab-pane" id="tab-b">
      <h1>B</h1>
    </div>
    <div class="tab-pane" id="tab-c">
      <h1>C</h1>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('[data-bs-toggle="pill"]').forEach(tabTrigger => {
    tabTrigger.addEventListener('shown.bs.tab', function (e) {
      const activeTarget = e.target.getAttribute('data-bs-target');
      const currentModule = e.target.closest('.MyTabPillsOne');
      currentModule.querySelectorAll('[data-bs-toggle="pill"]').forEach(trigger => {
        trigger.classList.remove('active');
        trigger.setAttribute('aria-selected', 'false');
      });
      currentModule.querySelector(`[data-bs-target="${activeTarget}"]`).classList.add('active');
      currentModule.querySelector(`[data-bs-target="${activeTarget}"]`).setAttribute('aria-selected', 'true');
    });
  });
});
</script>
</body>
</html>

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