javascript实现选项卡切换的核心是通过data-tab属性关联按钮与面板，点击时移除所有按钮和面板的active类，再为当前按钮及对应id面板添加active类，配合css控制显隐。
用 JavaScript 操作 DOM 实现选项卡切换，核心是控制“标签页按钮”和“内容面板”的显示与激活状态。关键在于：给按钮加点击事件，点击时移除所有按钮和面板的激活类，再给当前按钮和对应内容添加激活类。
HTML 结构要清晰对应
每个 tab 按钮要有唯一标识（比如 data-tab 属性），对应的内容面板用相同值的 id 或 data-tab，方便 JS 关联。
例如：
这里是首页内容
这里是关于内容
这里是联系内容
JS 绑定点击并切换显示
获取所有按钮，遍历绑定 click 事件；点击时拿到当前按钮的 data-tab 值，然后：
- 把所有 .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; 避免重复执行无意义操作。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
