CSS选项卡与子选项卡：实现激活项背景色切换需求

步骤1：定义激活状态的CSS样式 #

先为激活的主选项卡和子选项卡设置专属背景色，增强视觉区分：

/* 主选项卡激活样式 */
.tab.active {
  background-color: #e0f7fa; /* 可根据页面风格替换颜色值 */
  color: #212121;
}

/* 子选项卡激活样式 */
.sub-tab.active {
  background-color: #b2ebf2;
  color: #212121;
}

步骤2：修改JS逻辑，切换时同步激活类 #

在选项卡切换的事件处理中，确保点击时给当前选中项添加active类，同时移除同组其他项的该类：

主选项卡切换 #

document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', function() {
    // 清除所有主选项卡的激活状态
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    // 标记当前选项卡为激活状态
    this.classList.add('active');
    
    // 原有切换主内容的逻辑保持不变...
  });
});

子选项卡切换 #

document.querySelectorAll('.sub-tab').forEach(subTab => {
  subTab.addEventListener('click', function() {
    // 仅清除当前主选项卡分组下的子选项卡激活状态
    this.closest('.sub-tabs').querySelectorAll('.sub-tab').forEach(st => st.classList.remove('active'));
    // 标记当前子选项卡为激活状态
    this.classList.add('active');
    
    // 原有切换子内容的逻辑保持不变...
  });
});

步骤3：初始化默认激活状态 #

页面加载时，给默认选中的选项卡添加上active类，确保初始状态正确：

document.addEventListener('DOMContentLoaded', () => {
  // 默认激活第一个主选项卡
  document.querySelector('.tab')?.classList.add('active');
  // 默认激活第一个子选项卡
  document.querySelector('.sub-tab')?.classList.add('active');
});

这样就能通过背景色直观区分当前处于激活状态的主选项卡和子选项卡了，颜色值可以根据你的UI设计自由调整。

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