JavaScript实现选项卡切换的核心是通过data-tab属性关联按钮与面板，点击时移除所有按钮和面板的active类，再为当前按钮及对应ID面板添加active类，配合CSS控制显隐。
用 JavaScript 操作 DOM 实现选项卡切换，核心是控制“标签页按钮”和“内容面板”的显示与激活状态。关键在于：给按钮加点击事件，点击时移除所有按钮和面板的激活类，再给当前按钮和对应内容添加激活类。
HTML 结构要清晰对应
每个 tab 按钮要有唯一标识（比如 data-tab 属性），对应的内容面板用相同值的 id 或 data-tab，方便 JS 关联。
例如：
<div class="tabs"><button class="tab-btn" data-tab="home">首页</button>
<button class="tab-btn" data-tab="about">关于</button>
<button class="tab-btn" data-tab="contact">联系</button>
</div>
<div class="tab-panels">
<div id="home" class="tab-panel active">这里是首页内容</div>
<div id="about" class="tab-panel">这里是关于内容</div>
<div id="contact" class="tab-panel">这里是联系内容</div>
</div>
JS 绑定点击并切换显示
获取所有按钮，遍历绑定 click 事件；点击时拿到当前按钮的 data-tab 值，然后：
立即学习“Java免费学习笔记（深入）”；
- 把所有 .tab-btn 移除 active 类
- 给当前按钮添加 active 类
- 把所有 .tab-panel 移除 active 类
- 用 document.getElementById(tabId) 找到对应面板，加上 active 类
示例代码：
const tabBtns = document.querySelectorAll('.tab-btn');tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
const tabId = btn.dataset.tab;
// 清空所有按钮激活态
tabBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
// 清空所有面板激活态
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
document.getElementById(tabId).classList.add('active');
});
});
CSS 控制显隐逻辑
靠 CSS 控制哪个面板显示，推荐用 display: none / block 或 visibility: hidden / visible。注意：用 display 更彻底（不占布局空间），用 visibility 可保留原有布局。
例如：
.tab-panel { display: none; }.tab-panel.active { display: block; }
.tab-btn.active { background: #007bff; color: white; }
可选增强：默认激活第一个、防止重复点击
首次加载时确保第一个 tab 是激活的（JS 中手动触发一次切换，或直接在 HTML 中写好初始 active）；也可在 click 回调开头加判断：if (btn.classList.contains('active')) return; 避免重复执行无意义操作。
