本文讲解如何通过原生 JavaScript 实现「互斥式」激活状态管理：点击任一元素时，为其添加 active 类，同时自动移除其他同类元素上的该类，确保始终仅有一个元素处于激活态。
本文讲解如何通过原生 javascript 实现「互斥式」激活状态管理：点击任一元素时，为其添加 `active` 类，同时自动移除其他同类元素上的该类，确保始终仅有一个元素处于激活态。
在开发中，我们常遇到这样的交互需求：多个可点击元素（如标签页、选项卡、筛选项）需支持单选高亮——即点击某一项时，它变为激活态（如添加 active 类），而此前已激活的其他项必须自动取消激活。这与简单的 toggleClass() 行为不同，后者仅作用于当前元素，无法协调兄弟节点的状态。
上述问题中的原始代码使用 $(i).toggleClass("active")，虽能独立控制每个 <span></span> 的激活状态，但缺乏全局状态同步逻辑。要实现“点击 A → A 激活、B 取消；点击 B → B 激活、A 取消”的效果，关键在于：每次操作前，先清理所有已激活的同级元素，再对当前目标元素执行激活/反激活判断。
以下是推荐的原生 JavaScript 解决方案（无需 jQuery，兼容现代浏览器）：
function select(currObj) {
// 获取当前页面中所有已带有 'active' 类的 span 元素
const allActiveSpans = document.querySelectorAll('span.active');
// 遍历并移除其他 span 的 'active' 类（排除当前点击项）
allActiveSpans.forEach(span => {
if (span !== currObj) {
span.classList.remove('active');
}
});
// 对当前元素执行 toggle：若未激活则添加，若已激活则移除（实现点击取消）
currObj.classList.toggle('active');
}
对应 HTML 结构简洁明了：
<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;
font-weight: bold;
}
✅ 优势说明：
- 无依赖：纯原生实现，不依赖 jQuery 或其他库；
-
语义清晰：
querySelectorAll('span.active')精准定位当前激活项，避免误操作； -
健壮性高：通过
span !== currObj判断确保不会误删自身类名； -
支持点击取消：
toggle()保留了“再次点击当前项可取消激活”的交互自由度（如需强制单选不可取消，可改用classList.add()）。
⚠️ 注意事项：
- 若项目中存在大量同类元素（如数百个
<span></span>），建议将选择器限定在特定容器内（例如#tab-container span.active），以提升查询性能； - 在 Vue/React 等框架中，应优先使用响应式数据驱动类名，而非直接操作 DOM；
- 若需兼容 IE11，请替换
forEach为传统for循环，并使用className属性替代classList（但强烈建议现代项目放弃 IE 支持）。
该方案兼顾简洁性与可维护性，是实现单选式 UI 状态管理的经典实践。
