Tab组件Bug修复：首次切换后首个标签无法恢复非激活样式

你的问题根源在于切换标签时，没有彻底清除所有标签的激活样式，导致首个标签在再次被点击后，切换到其他标签时仍保留着激活类。下面是直接可用的JS解决方案：

核心思路 #

用一个专属的CSS类（比如active）控制激活状态的样式，每次切换标签时：

1. 移除所有标签按钮的激活类
2. 给当前点击的按钮添加激活类
3. 同步切换对应面板的显示状态（如果需要）

完整代码示例 #

HTML结构

<div class="tab-container">
  <button class="tab-btn active">标签1</button>
  <button class="tab-btn">标签2</button>
  <button class="tab-btn">标签3</button>
  
  <div class="tab-panel active">面板1内容</div>
  <div class="tab-panel">面板2内容</div>
  <div class="tab-panel">面板3内容</div>
</div>

CSS样式

/* 基础标签样式（非激活状态：灰蓝色） */
.tab-btn {
  background-color: #6b7280;
  color: #fff;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  margin-right: 4px;
}

/* 激活状态样式：白色背景+深色文字 */
.tab-btn.active {
  background-color: #ffffff;
  color: #333;
}

/* 面板基础样式：默认隐藏 */
.tab-panel {
  display: none;
  margin-top: 12px;
  padding: 15px;
  border: 1px solid #e5e7eb;
}

/* 激活面板显示 */
.tab-panel.active {
  display: block;
}

JavaScript逻辑

// 获取所有标签按钮和对应面板
const tabButtons = document.querySelectorAll('.tab-btn');
const tabPanels = document.querySelectorAll('.tab-panel');

// 给每个标签绑定点击事件
tabButtons.forEach((button, index) => {
  button.addEventListener('click', () => {
    // 第一步：移除所有标签和面板的激活类
    tabButtons.forEach(btn => btn.classList.remove('active'));
    tabPanels.forEach(panel => panel.classList.remove('active'));
    
    // 第二步：给当前点击的标签和对应面板添加激活类
    button.classList.add('active');
    tabPanels[index].classList.add('active');
  });
});

为什么这个方案能解决你的问题 #

之前的逻辑可能只给新点击的标签添加了激活样式，却没有清除其他标签的激活类。这个方案每次切换时都会先重置所有标签的状态，再单独激活当前标签，从根本上避免了样式残留的问题。

内容的提问来源于stack exchange，提问作者Fruitcup222