本文详解如何通过原生 javascript 实现点击导航项时自动添加 `active` 类、移除其他项的 `active` 类，并同步切换对应 `.tab-pane` 内容区域的 `show active` 状态，兼容 bootstrap 5 的 tab 语义结构。
在使用 Bootstrap 5 的 Tabs 组件时，虽然 data-bs-toggle="tab" 可以自动处理切换逻辑，但有时需手动控制激活状态（例如：配合自定义动画、延迟加载、或脱离默认事件流）。此时，仅靠 Bootstrap 自带行为可能不够灵活——比如你希望点击 <li> 中的按钮时，不仅高亮该导航项，还要精确控制对应 <div class="tab-pane"> 的 show active 类，同时确保其他面板被正确隐藏。
以下是一个轻量、可靠、不依赖 jQuery 的纯 JavaScript 解决方案：
✅ 核心逻辑说明
- 监听所有 .nav-link 按钮的 click 事件；
- 移除所有 .nav-link 的 active 类；
- 为当前点击的按钮添加 active 类；
- 同步查找其 data-bs-target（如 #entertainment）指向的 .tab-pane 元素；
- 移除所有 .tab-pane 的 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... -->
</ul>
<!-- 内容面板 -->
<div class="tab-content">
<div class="tab-pane fade" id="entertainment" role="tabpanel">
<p>Entertainment content here.</p>
</div>
<div class="tab-pane fade" id="infotainment" role="tabpanel">
<p>Infotainment content here.</p>
</div>
<div class="tab-pane fade" id="music" role="tabpanel">
<p>Music content here.</p>
</div>
</div>// 获取导航容器
const tabList = document.getElementById('postsTab');
// 代理监听所有 .nav-link 点击事件（更高效，避免重复绑定）
tabList.addEventListener('click', function (e) {
// 仅响应 .nav-link 按钮点击
if (!e.target.classList.contains('nav-link')) return;
const targetSelector = e.target.getAttribute('data-bs-target');
if (!targetSelector) return;
// 1️⃣ 清除所有 .nav-link 的 active 状态
document.querySelectorAll('.nav-link').forEach(btn => {
btn.classList.remove('active');
});
// 2️⃣ 激活当前按钮
e.target.classList.add('active');
// 3️⃣ 清除所有 .tab-pane 的 show & active
document.querySelectorAll('.tab-pane').forEach(pane => {
pane.classList.remove('show', 'active');
});
// 4️⃣ 显示目标面板（注意：fade 是过渡类，必须保留）
const targetPane = document.querySelector(targetSelector);
if (targetPane) {
targetPane.classList.add('show', 'active');
}
});⚠️ 注意事项
- 不要移除 fade 类：它是 Bootstrap 5 的 CSS 过渡基础类，show active 需与 fade 共存才能实现平滑淡入效果；
- 确保 data-bs-target 值与 id 严格匹配（含 # 符号），且目标元素存在；
- 若页面含多个 Tab 组，请为每个组设置唯一 ID 并分别初始化逻辑，避免全局冲突；
- 如需支持键盘导航（如 Tab 键 + Enter），建议补充 keydown 事件监听，但本例聚焦于鼠标点击场景。
✅ 总结
该方案完全替代了 Bootstrap 默认的 data-bs-toggle 行为，赋予你对激活状态的完全控制权，同时保持与 Bootstrap CSS 的无缝协作。代码简洁、语义清晰、无第三方依赖，适合集成到 Laravel Blade、Vue 单文件组件或纯静态页面中。只需一次初始化，即可实现「点击即高亮 + 内容精准切换」的完整交互闭环。
