JavaScript实现：点击同class按钮时移除前一个按钮的active类

你的问题在于classList.toggle()只会切换当前点击按钮的active类，完全没处理其他按钮的状态，所以会出现多个按钮同时高亮的情况，不符合单选需求。下面是两种最优实现方式：

方式一：直接遍历处理（适合固定数量的按钮） #

这种写法直观易懂，适合按钮数量固定的场景：

<button class="helpBtn active">Help</button>
<button class="helpBtn">Help</button>
<button class="helpBtn">Help</button>

<script>
const helpBtns = document.querySelectorAll('.helpBtn');

helpBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 先把所有按钮的active类都移除
    helpBtns.forEach(b => b.classList.remove('active'));
    // 给当前点击的按钮添加active类
    btn.classList.add('active');
  });
});
</script>

方式二：事件委托（适合动态按钮场景） #

如果你的按钮是动态生成的（比如后续通过JS新增），用事件委托绑定在父元素上更高效，不用每次新增按钮都重新绑定事件：

<!-- 给按钮套个父容器 -->
<div class="btn-container">
  <button class="helpBtn active">Help</button>
  <button class="helpBtn">Help</button>
  <button class="helpBtn">Help</button>
</div>

<script>
const btnContainer = document.querySelector('.btn-container');

btnContainer.addEventListener('click', (e) => {
  // 确认点击的是目标按钮，不是其他元素
  if (!e.target.matches('.helpBtn')) return;
  
  // 移除容器内所有按钮的active类
  btnContainer.querySelectorAll('.helpBtn').forEach(btn => btn.classList.remove('active'));
  // 给当前点击的按钮添加active类
  e.target.classList.add('active');
});
</script>

补充说明 #

为什么不能用toggle？因为你的需求是单选——同一时间只能有一个按钮处于激活状态。toggle只是切换单个元素的类，无法控制其他元素的状态，所以必须先统一清除所有按钮的active，再给当前按钮设置。

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