本文介绍如何通过原生 JavaScript 实现类似单选按钮的样式切换效果——点击任一元素时，为其添加 active 类，同时自动移除其他同级元素上的该类，确保同一时刻仅有一个元素处于激活状态。
本文介绍如何通过原生 javascript 实现类似单选按钮的样式切换效果——点击任一元素时，为其添加 `active` 类，同时自动移除其他同级元素上的该类，确保同一时刻仅有一个元素处于激活状态。
在实际开发中，常需实现“互斥激活”行为：例如导航标签、筛选项或选项卡，用户点击某一项时高亮当前项，同时取消之前高亮项的样式。原始代码使用 toggleClass() 仅对当前元素操作，无法满足“此开彼关”的需求。解决方案是：先清除所有已激活元素的 active 类，再为当前点击元素统一添加。
以下是推荐的原生 JavaScript 实现（无需 jQuery）：
<span onclick="select(this)">text 1</span> <span onclick="select(this)">text 2</span>
.active {
background-color: #007bff;
color: white;
padding: 4px 12px;
border-radius: 4px;
}
function select(currObj) {
// 获取所有已带有 'active' 类的 span 元素
const allActiveSpans = document.querySelectorAll('span.active');
// 遍历并移除其他 active 元素的 class（跳过当前点击项）
allActiveSpans.forEach(span => {
if (span !== currObj) {
span.classList.remove('active');
}
});
// 切换当前元素的 active 状态（支持再次点击取消激活）
currObj.classList.toggle('active');
}
✅ 优势说明：
- 完全基于原生 DOM API，轻量、兼容性好（支持 IE10+）；
- 使用
classList.toggle()保留了“二次点击取消激活”的交互灵活性； - 逻辑清晰：先清理、再聚焦，避免状态冲突；
- 可轻松扩展至任意数量同类元素（如
<span></span>、<button></button>或自定义容器）。
⚠️ 注意事项：
- 若需严格单选（即不允许全部取消），可将
toggle改为add：currObj.classList.add('active')； - 建议将内联
onclick移至外部 JS 中绑定事件监听器（更利于维护与解耦），例如：document.querySelectorAll('span').forEach(el => el.addEventListener('click', () => select(el))); - 如项目已引入 jQuery，等效写法为：
$('span').removeClass('active').filter(this).addClass('active');
通过这一模式，你既能精准控制 UI 状态，又能保持代码简洁可维护，是前端交互开发中的基础而关键的实践技巧。
