如何实现按钮单选激活：同一时间仅一个按钮处于激活状态

问题分析 #

当前代码里每个按钮独立切换自身的is-toggled类，完全没处理其他按钮的状态，导致多个按钮能同时处于激活状态，达不到单选效果。

解决方案 #

统一管理所有按钮的状态，点击任意按钮时先清除所有按钮的激活类，再控制当前按钮的激活状态，实现互斥单选。

修改后的HTML代码

<button class="category-btn">Gaming</button>
<button class="category-btn">Music</button>
<button class="category-btn">Tech</button>

注：给所有按钮加共同类category-btn方便批量选择；移除内联onclick，用JS绑定事件更规范

修改后的JavaScript代码

// 选中所有分类按钮
const categoryButtons = document.querySelectorAll('.category-btn');

// 统一处理按钮点击逻辑
function handleButtonClick(e) {
  const clickedBtn = e.target;
  const isCurrentlyActive = clickedBtn.classList.contains('is-toggled');

  // 先移除所有按钮的激活状态
  categoryButtons.forEach(btn => btn.classList.remove('is-toggled'));

  // 如果当前按钮原本未激活，就添加激活类；若原本已激活，保持取消状态（可选：若需强制保留一个激活，删掉此判断直接加类即可）
  if (!isCurrentlyActive) {
    clickedBtn.classList.add('is-toggled');
  }
}

// 给每个按钮绑定点击事件
categoryButtons.forEach(btn => btn.addEventListener('click', handleButtonClick));

逻辑说明 #

1. 批量选中所有按钮，避免单独选择每个元素的冗余代码
2. 点击按钮时先清空所有激活状态，确保只有当前操作的按钮能处于激活状态
3. 可选调整：如果需要支持“取消所有激活”，保留isCurrentlyActive判断；如果必须保持至少一个按钮激活，直接在清空后给当前按钮加is-toggled类就行

内容的提问来源于stack exchange，提问作者Jimrose S. Sarmiento