选项卡切换需先清除所有标签的激活类再为当前标签添加，同步隐藏所有面板并显示对应面板；推荐用data-tab/data-panel属性映射关联，确保唯一激活态。

用 classList.add 单独实现选项卡激活切换是不完整的——它只能添加类，不能自动移除其他标签的激活态。真正可用的方案是：**先清除所有标签的激活类，再给当前点击的标签添加激活类**，同时联动内容面板显示/隐藏。

核心逻辑：先清空，再添加

选项卡切换的关键不是“加”，而是“换”。必须确保同一时间只有一个标签（和对应面板）处于激活状态：

• 遍历所有 tab 标签，用 classList.remove('active') 清掉旧激活态
• 对当前点击的 tab 元素调用 classList.add('active')
• 同步操作内容区：隐藏所有 panel，再显示当前关联的 panel

HTML 结构要带关联标识

推荐用 data-tab 属性建立 tab 和 panel 的映射关系，比靠索引更健壮：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

<div class="tabs">
  <button class="tab" data-tab="home">首页</button>
  <button class="tab" data-tab="about">关于</button>
  <button class="tab" data-tab="contact">联系</button>
</div>
<div class="panels">
  <div class="panel" data-panel="home">这里是首页内容</div>
  <div class="panel" data-panel="about">这里是关于内容</div>
  <div class="panel" data-panel="contact">这里是联系内容</div>
</div>

JavaScript 绑定点击并切换

给每个 tab 按钮绑定点击事件，执行统一的切换逻辑：

立即学习“Java免费学习笔记（深入）”；

const tabs = document.querySelectorAll('.tab');
const panels = document.querySelectorAll('.panel');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 1. 清空所有 tab 的 active 类
    tabs.forEach(t => t.classList.remove('active'));
    // 2. 给当前 tab 添加 active 类
    tab.classList.add('active');
    // 3. 获取当前 tab 对应的面板名
    const target = tab.dataset.tab;
    // 4. 隐藏所有 panel，显示目标 panel
    panels.forEach(p => {
      p.classList.toggle('active', p.dataset.panel === target);
    });
  });
});

CSS 控制显隐与样式

用 CSS 定义 .active 类控制视觉反馈和显示状态：

.tab { padding: 8px 16px; margin-right: 4px; }
.tab.active { background: #007bff; color: white; border-radius: 4px; }
.panel { display: none; }
.panel.active { display: block; }