本文详解如何通过原生 javascript 实现点击 `
在使用 Bootstrap 5 的 Tabs 组件时，虽然 data-bs-toggle="tab" 能自动处理切换逻辑，但有时需手动控制激活状态（例如：自定义事件、AJAX 加载后重置状态、或与非标准 DOM 结构集成）。此时，仅靠 Bootstrap 默认行为可能无法满足需求——比如你希望点击 <li> 触发而非 <button>，或需精确控制 .tab-pane 的 show active 类。
以下是一个完整、健壮的解决方案，分为三步实现：
✅ 步骤一：监听 <li> 点击，统一管理 nav-link 激活状态
document.addEventListener('DOMContentLoaded', () => {
const tabList = document.getElementById('postsTab');
tabList.addEventListener('click', (e) => {
// 仅响应 <button> 的点击（避免误触 li）
if (e.target.tagName !== 'BUTTON') return;
// 移除所有 .nav-link 的 active 类
document.querySelectorAll('.nav-link').forEach(btn => {
btn.classList.remove('active');
btn.setAttribute('aria-selected', 'false');
});
// 为当前按钮添加 active 并更新 ARIA 属性
e.target.classList.add('active');
e.target.setAttribute('aria-selected', 'true');
// ? 关键：获取 data-bs-target 值（如 "#entertainment"）
const targetSelector = e.target.getAttribute('data-bs-target');
if (!targetSelector) return;
// 隐藏所有 .tab-pane
document.querySelectorAll('.tab-pane').forEach(pane => {
pane.classList.remove('show', 'active');
pane.setAttribute('aria-hidden', 'true');
});
// 显示目标 .tab-pane 并设为活跃
const targetPane = document.querySelector(targetSelector);
if (targetPane) {
targetPane.classList.add('show', 'active');
targetPane.setAttribute('aria-hidden', 'false');
}
});
});? 说明：此逻辑不依赖 Bootstrap 的 JS 插件，完全由原生代码控制，确保 aria-selected 和 aria-hidden 同步更新，符合无障碍（a11y）规范。
✅ 步骤二：确保 HTML 结构语义正确（无需修改你的现有结构）
你已有的 <ul> 和 <div class="tab-pane"> 结构完全可用，只需保证：
- 每个 <button> 包含 data-bs-target="#xxx"，且对应 #xxx 是唯一 ID；
- 所有 .tab-pane 初始状态可为 fade + show active（首个默认展开），其余为 fade（无需 show active）。
示例片段（保持不变）：
<!-- 首个默认激活 --> <div class="tab-pane fade show active" id="entertainment" role="tabpanel">...</div> <!-- 其余初始隐藏 --> <div class="tab-pane fade" id="infotainment" role="tabpanel">...</div>
✅ 步骤三：可选增强 —— CSS 样式微调（提升体验）
/* 确保 nav-link 在 active 时视觉突出 */
.nav-link.active {
border-bottom: 2px solid #0d6efd;
font-weight: 600;
}
/* 可选：为 tab-pane 添加淡入过渡 */
.tab-pane {
transition: opacity 0.2s ease-in-out;
}
.tab-pane.show {
opacity: 1;
}
.tab-pane:not(.show) {
opacity: 0;
}⚠️ 注意事项
- 不要混用 Bootstrap JS 与手动逻辑：若同时引入 bootstrap.bundle.js 并启用 data-bs-toggle，可能造成事件冲突。推荐：禁用默认行为（移除 data-bs-toggle="tab"），完全交由上述脚本控制。
- ID 唯一性必须严格保证：data-bs-target 指向的 ID 必须存在于 DOM 中且不重复。
- 动态内容场景：若 .tab-pane 是后续 AJAX 插入的，需在插入后调用 initTabHandlers() 函数重新绑定（可封装为可复用函数）。
✅ 总结
该方案以最小侵入方式实现了「点击导航项 → 高亮按钮 + 显示对应内容」的核心需求，兼顾语义化、可访问性与可维护性。无需 jQuery，纯原生 ES6+ 语法，适配现代浏览器及 Bootstrap 5 生态。调试时可通过浏览器开发者工具实时观察 class 和 aria-* 属性变化，快速验证逻辑正确性。
