如何为导航项动态添加/移除 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.

							

								
								

									Cursor Directory
									
专为Cursor设计的开源资源库、提示词库
								
								下载 
							
						
  
  

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