如何用JavaScript高效移除父元素下所有子元素的active类

嘿，这是个非常普遍的选项卡交互需求，我给你整理了几种高效的实现方式，覆盖不同场景的需求：

方法1：基础遍历移除法（适合固定数量的选项卡） #

这种写法直观易懂，适合选项卡数量固定且不多的场景：

你的HTML保持不变：

<div class="tab-div">
  <div class="tab">default</div>
  <div class="tab">hover</div>
  <div class="tab">active</div>
</div>

对应的JavaScript实现：

// 获取所有.tab元素
const tabs = document.querySelectorAll('.tab');

// 为每个选项卡绑定点击事件
tabs.forEach(tab => {
  tab.addEventListener('click', function() {
    // 第一步：移除所有选项卡的active类
    tabs.forEach(item => item.classList.remove('active'));
    // 第二步：给当前点击的选项卡添加active类
    this.classList.add('active');
  });
});

方法2：事件委托优化（适合动态添加选项卡的场景） #

如果你的选项卡后续可能动态新增（比如通过JS添加新的.tab元素），事件委托会是更高效的选择——不需要给每个新元素重新绑定事件，只监听父容器的点击即可：

// 获取选项卡的父容器
const tabContainer = document.querySelector('.tab-div');

// 给父容器绑定点击事件
tabContainer.addEventListener('click', function(e) {
  // 确保点击的目标是.tab元素（避免点击到容器空白处触发）
  if (e.target.classList.contains('tab')) {
    // 移除容器内所有.tab的active类
    this.querySelectorAll('.tab').forEach(item => item.classList.remove('active'));
    // 给当前点击的元素添加active类
    e.target.classList.add('active');
  }
});

方法3：精准操作优化（进一步提升性能） #

如果页面中始终只有一个激活的选项卡，我们可以直接定位到当前的active元素，避免遍历所有选项卡，性能会更优：

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

tabs.forEach(tab => {
  tab.addEventListener('click', function() {
    // 找到当前已激活的选项卡
    const currentActiveTab = document.querySelector('.tab.active');
    // 如果存在激活的选项卡，移除它的active类
    if (currentActiveTab) currentActiveTab.classList.remove('active');
    // 给当前点击的选项卡添加active类
    this.classList.add('active');
  });
});

补充说明 #

注意CSS里的:active伪类和我们这里的.active类是不同的：:active只在鼠标点击按住元素时生效，而我们通过JS添加的.active类是持久化的选中状态，需要配合你的自定义CSS样式来展示选中效果~

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