本文介绍一种简洁、可维护的原生 javascript 方案，实现点击导航项时动态切换对应内容区块，并自动高亮当前激活项，支持页面加载时默认显示首个内容区。
在构建单页式内容切换组件（如 Tab 栏、客户端切换面板等）时，核心需求有三点：
✅ 页面加载后自动激活第一个导航项并显示其对应内容；
✅ 点击任意导航按钮时，仅显示该按钮关联的内容，同时更新激活状态；
✅ 逻辑清晰、代码精简，不依赖 jQuery，便于初学者理解与扩展。
你原始代码中的主要问题在于：直接读取 element.style.display 无法获取 CSS 中定义的 display: none 样式——因为 style 属性仅反映内联样式（inline styles），而你的隐藏规则写在
以下是优化后的完整实现方案，结构清晰、语义明确、无冗余逻辑：
✅ HTML 结构（增强语义与可维护性）
<div class="tab-nav">
<button type="button" data-target="div1" class="tab-link active">div1</button>
<button type="button" data-target="div2" class="tab-link">div2</button>
</div>
<div class="tab-content">
<section id="div1" class="tab-pane active">
<p class="add-paragraph">This is div 1.</p>
</section>
<section id="div2" class="tab-pane">
<p class="add-paragraph">Div2 is different from div1</p>
</section>
</div>? 提示：使用 替代 更符合语义（可点击控件），并通过 data-target 统一绑定目标 ID，提升可扩展性。
✅ CSS 样式（精简且可复用）
.tab-nav {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 0 auto;
gap: 1rem;
}
.tab-link {
border: none;
background: none;
padding: 0.5rem 1rem;
font-size: 1rem;
cursor: pointer;
border-bottom: 0.18rem solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.tab-link:hover:not(.active) {
color: #970fc2;
}
.tab-link#div1-link.active,
.tab-link[data-target="div1"].active {
border-bottom-color: #970fc2;
color: #970fc2;
}
.tab-link#div2-link.active,
.tab-link[data-target="div2"].active {
border-bottom-color: #52b54b;
color: #52b54b;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}⚠️ 注意：我们改用 CSS 类控制显隐（.active → display: block），避免直接操作 style.display，更易维护、支持 CSS 动画过渡。
✅ 原生 JavaScript（简洁健壮，仅 20 行）
document.addEventListener('DOMContentLoaded', () => {
const tabLinks = document.querySelectorAll('.tab-link');
const tabPanes = document.querySelectorAll('.tab-pane');
// 初始化：确保首个 tab-link 和首个 tab-pane 激活
if (tabLinks.length > 0 && tabPanes.length > 0) {
tabLinks[0].classList.add('active');
tabPanes[0].classList.add('active');
}
tabLinks.forEach(link => {
link.addEventListener('click', () => {
const targetId = link.dataset.target;
const targetPane = document.getElementById(targetId);
// 移除所有激活态
tabLinks.forEach(l => l.classList.remove('active'));
tabPanes.forEach(p => p.classList.remove('active'));
// 激活当前项及其内容
link.classList.add('active');
if (targetPane) targetPane.classList.add('active');
});
});
});✅ 关键优势说明
- 无需检查 display 值：完全规避 getComputedStyle 的复杂判断，靠 CSS 类统一控制状态；
- 自动初始化：DOMContentLoaded 确保 DOM 就绪后立即激活首项，无需手动调用 toggle("active")；
- 高可扩展性：新增 tab 只需添加一对
- 无障碍友好：
? 总结
实现导航驱动的内容切换，本质是「状态同步」问题：导航项的激活状态，必须与对应内容区块的可见状态严格一致。最佳实践是用单一数据源（CSS 类）驱动 UI 状态，而非混合使用内联样式、计算样式和 JS 状态变量。本方案以最小认知负荷达成最大鲁棒性，是 JavaScript 初学者掌握 DOM 操作与组件化思维的理想范例。
立即学习“Java免费学习笔记（深入）”；
