求助：点击切换div类时关闭其他div激活类的实现方案

嘿，我明白你的需求啦——就是要实现单选式的toggle效果：每次只能有一个div处于active状态，点击新的div时，其他的自动恢复原样。其实只用原生JS就能轻松搞定，不用纠结toggle能不能实现，咱们直接上最优方案：

核心思路 #

• 点击目标div时，先遍历所有需要控制的div，移除它们的active类
• 再给当前点击的div添加active类（如果需要支持“再次点击取消当前激活”，就换成toggle这个类）

完整代码示例 #

HTML结构 #

<!-- 给所有目标div统一加个类`org-item`，方便批量操作 -->
<div id="div1" class="org-item" onclick="orgClick(this.id)">Div 1</div>
<div id="div2" class="org-item" onclick="orgClick(this.id)">Div 2</div>
<div id="div3" class="org-item" onclick="orgClick(this.id)">Div 3</div>

JavaScript函数 #

function orgClick(clicked_id) {
  // 1. 获取所有需要控制的div元素
  const allDivs = document.querySelectorAll('.org-item');
  
  // 2. 遍历所有div，移除active类
  allDivs.forEach(div => {
    div.classList.remove('active');
  });
  
  // 3. 给当前点击的div添加active类
  const currentDiv = document.getElementById(clicked_id);
  currentDiv.classList.add('active');

  // 如果需要点击当前已激活的div时取消它的状态，就把上面的add换成下面的：
  // currentDiv.classList.toggle('active');
}

额外优化建议 #

• 尽量避免用onclick内联绑定事件，推荐用事件委托的方式，代码更优雅且易于维护：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 假设所有div都在一个名为org-container的容器里
  const container = document.querySelector('.org-container');
  container.addEventListener('click', function(e) {
    // 只处理点击org-item类的元素
    if (e.target.classList.contains('org-item')) {
      // 执行移除所有active类的逻辑
      const allDivs = container.querySelectorAll('.org-item');
      allDivs.forEach(div => div.classList.remove('active'));
      // 给当前点击的元素添加active类
      e.target.classList.add('active');
    }
  });
});

这样就算后续新增div，也不用再手动绑定onclick事件啦～

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