本文介绍一种轻量、原生 javascript 实现的标签式内容切换方案：页面加载时默认显示首个内容区块，点击导航项可高亮对应按钮并切换显示对应内容，全程无需 jquery，代码简洁可维护。
在构建单页应用或模块化内容区域（如产品介绍、客户案例、功能说明等）时，常需实现“点击导航项 → 切换主体内容”的交互效果。理想方案应满足：首次加载即激活默认项、状态同步准确、逻辑清晰、无外部依赖。原始代码的问题核心在于：它错误地依赖 element.style.display 判断可见性——而该属性仅反映内联样式，无法读取 CSS 文件中定义的 display: none，导致初始判断失效，进而使激活态切换逻辑紊乱。
以下是优化后的完整实现，采用语义化结构、模块化逻辑与健壮的状态检测：
✅ HTML 结构（语义清晰，便于扩展）
<div class="tab-nav"> <button type="button" class="tab-btn" data-target="div1">Div 1</button> <button type="button" class="tab-btn" data-target="div2">Div 2</button> </div> <div class="tab-content"> <div id="div1" class="tab-pane active">This is div 1.</div> <div id="div2" class="tab-pane">Div 2 is different from div 1</div> </div>✅ CSS 样式（分离关注点，支持灵活主题）
.tab-nav { display: grid; grid-template-columns: 1fr 1fr; margin: 0 auto; gap: 1rem; } .tab-btn { border: none; background: none; padding: 0.5rem 1rem; font-size: 1rem; cursor: pointer; border-bottom: 0.18rem solid transparent; transition: all 0.2s ease; } .tab-btn:hover:not(.active) { color: #970fc2; } .tab-btn[data-target="div1"].active { border-bottom-color: #970fc2; color: #970fc2; } .tab-btn[data-target="div2"].active { border-bottom-color: #52b54b; color: #52b54b; } .tab-pane { display: none; } .tab-pane.active { display: block; }✅ 原生 JavaScript（简洁、可复用、无副作用）
// 获取所有导航按钮与内容面板 const tabButtons = document.querySelectorAll('.tab-btn'); const tabPanes = document.querySelectorAll('.tab-pane'); // 激活指定 ID 的标签页 function activateTab(targetId) { // 清除所有按钮的 active 状态 tabButtons.forEach(btn => btn.classList.remove('active')); // 清除所有面板的 active 状态 tabPanes.forEach(pane => pane.classList.remove('active')); // 激活目标按钮与面板 document.querySelector(`.tab-btn[data-target="${targetId}"]`).classList.add('active'); document.getElementById(targetId).classList.add('active'); } // 页面加载时激活第一个标签页（确保 dom 就绪） document.addEventListener('DOMContentLoaded', () => { const firstTabId = tabButtons[0]?.dataset.target || 'div1'; activateTab(firstTabId); }); // 绑定点击事件（事件委托更优，此处为清晰起见直接绑定） tabButtons.forEach(button => { button.addEventListener('click', () => { activateTab(button.dataset.target); }); });⚠️ 关键注意事项
- 避免 style.display 陷阱：原始代码依赖 el.style.display，但该属性无法读取 CSS 规则中的值。应使用 getComputedStyle(el).display 或（更推荐）CSS 类控制显隐（如本例的 .active），语义更强、更易维护。
- DOMContentLoaded 替代 window.onload：后者等待所有资源（图片、样式表）加载完毕，而前者仅等待 DOM 构建完成，响应更快。
- *`data-属性提升可维护性**：用data-target` 显式关联按钮与内容，比硬编码 ID 更具扩展性（新增第三项只需添加 HTML + CSS，js 逻辑零修改）。
- 无障碍友好：使用