本文介绍一种轻量、原生 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 逻辑零修改）。
- 无障碍友好：使用
