如何为导航项和对应内容面板动态添加/移除 active 和 show 类

在使用 Bootstrap 5 构建标签页（Tabs）时，常需手动控制 .nav-link.active 与 .tab-pane.show.active 的同步状态——尤其当默认的 data-bs-toggle="tab" 行为无法满足自定义逻辑（如配合 AJAX 加载、动画切换或非标准 DOM 结构）时。下面提供一套轻量、可靠、不依赖 jQuery 的纯 JavaScript 解决方案。

Article Forge

行业文案AI写作软件，可自动为特定主题或行业生成内容

下载

✅ 核心逻辑说明

• 点击任意
• 内的按钮时，清除所有 .nav-link 的 active 类；
• 给当前点击的按钮添加 active 类；
• 同时，根据该按钮的 data-bs-target 属性值（如 #entertainment），定位对应 ，为其添加 show active 类，并移除其他 .tab-pane 的 show active 类。

✅ 完整可运行代码示例

<!-- 导航栏 -->
<ul class="nav nav-tabs nav-pills nav-fill" id="postsTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" data-bs-target="#entertainment" data-bs-toggle="tab" type="button">Entertainment</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-target="#infotainment" data-bs-toggle="tab" type="button">Infotainment</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-target="#music" data-bs-toggle="tab" type="button">Music</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-target="#lifestyle" data-bs-toggle="tab" type="button">Lifestyle</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-target="#recipe" data-bs-toggle="tab" type="button">Recipe</button>
  </li>
</ul>

<!-- 内容面板 -->
<div class="tab-content">
  <div class="tab-pane fade show active" id="entertainment" role="tabpanel">Entertainment content</div>
  <div class="tab-pane fade" id="infotainment" role="tabpanel">Infotainment content</div>
  <div class="tab-pane fade" id="music" role="tabpanel">Music content</div>
  <div class="tab-pane fade" id="lifestyle" role="tabpanel">Lifestyle content</div>
  <div class="tab-pane fade" id="recipe" role="tabpanel">Recipe content</div>
</div>

// 获取导航容器与所有导航按钮
const tabList = document.getElementById('postsTab');
const navLinks = tabList.querySelectorAll('.nav-link');
const tabPanes = document.querySelectorAll('.tab-pane');

// 为每个导航按钮绑定点击事件
navLinks.forEach(link => {
  link.addEventListener('click', function (e) {
    e.preventDefault(); // 阻止默认跳转（如有 href）

    // 1️⃣ 清除所有 .nav-link 的 active 类
    navLinks.forEach(l => l.classList.remove('active'));

    // 2️⃣ 为当前点击项添加 active
    this.classList.add('active');

    // 3️⃣ 获取目标面板 ID（来自 data-bs-target）
    const targetId = this.getAttribute('data-bs-target');
    if (!targetId) return;

    // 4️⃣ 清除所有 .tab-pane 的 show & active 类
    tabPanes.forEach(pane => {
      pane.classList.remove('show', 'active');
    });

    // 5️⃣ 为目标面板添加 show & active（确保 fade 已存在）
    const targetPane = document.querySelector(targetId);
    if (targetPane && targetPane.classList.contains('tab-pane')) {
      targetPane.classList.add('show', 'active');
    }
  });
});

⚠️ 注意事项

• 确保 data-bs-target 值与对应 #id 完全一致（含 # 符号），否则 document.querySelector() 将无法匹配；
• 若页面中存在多个 Tab 组，请为每个组设置唯一 ID（如 #postsTab、#userTab），并分别初始化逻辑，避免事件污染；
• Bootstrap 5 默认 .fade 类控制淡入动画，show active 是显示关键；请勿移除 fade，否则动画失效；
• 如需支持键盘导航（Tab 键 + Enter），建议补充 keydown 事件监听（本文聚焦点击交互，略）。

✅ 总结

该方案完全替代了 Bootstrap 自带的 data-bs-toggle="tab" 行为，赋予你更精细的控制权：可无缝集成加载状态、权限校验、埋点统计等扩展逻辑。代码简洁、无第三方依赖、语义清晰，适用于任何基于 Bootstrap 5 的 Tab 场景。