本文详解如何通过原生 javascript 实现点击 `

document.addEventListener('DOMContentLoaded', () => {
  const tabList = document.getElementById('postsTab');

  tabList.addEventListener('click', (e) => {
    // 仅响应 

示例片段（保持不变）：

...

...

✅ 步骤三：可选增强 —— 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-* 属性变化，快速验证逻辑正确性。