如何为导航项动态添加/移除 active 类并同步控制对应内容面板的显示状态

的 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 类。

✅ 完整可运行代码示例

   
     Entertainment   
   
     Infotainment   
   
     Music   
    
   
   
     
Entertainment content here.
   
   
     
Infotainment content here.
   
   
     
Music content here.
   
 

// 获取导航容器 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 单文件组件或纯静态页面中。只需一次初始化，即可实现「点击即高亮 + 内容精准切换」的完整交互闭环。