1. 实现目标与设计要点
在前端交互中，独占式类名切换是一类常见需求：用户点击某一个选项后，仅此项保持激活状态，其余同组项自动失活。本文聚焦于 纯原生 JavaScript 的实现思路，避免任何第三方库依赖，确保在现代浏览器的原生能力上高效运行。
设计目标强调可维护性与可扩展性：通过在 HTML 上标记分组信息，使用 事件委托 的方式处理点击，尽量减少对 DOM 的直接操作次数，并提供可读、可复用的实现模板。最终效果是，点击一个选项即可切换激活状态，同组内只有一个激活，并可以通过键盘快速切换。
1.1 核心原理与行为约束
核心原理是把页面中的若干项组织成一个或多个 分组，每个分组内部只能有一个项具有 active 类名。实现时，应保证以下行为：当用户点击分组内的一个项时，该项获得激活并移除其他项的激活状态；若使用键盘导航，也应支持 方向键 和 回车/空格 来切换。
在实现中，优先采用 原生 classList 操作，以及 ARIA 属性 以提升无障碍体验，例如将当前激活项设为 aria-selected="true"，其他项设为 aria-selected="false"，方便屏幕阅读器读出当前状态。
1.2 结构标记与选择器设计
为了实现独占式切换，HTML 结构应以分组为单位，且每个分组包含若干可点击的选项。推荐的标记方式是：分组容器使用 data-exclusive 属性标记组名，组内每个可点击项使用 exclusive-item 类和必要的属性来描述其身份。
这样的标记实现带来两个好处：一是通过 data-exclusive 实现分组的自然隔离，二是通过 exclusive-item 提供一个清晰的选择目标，便于事件委托处理和键盘导航。
2. 事件驱动与状态管理
纯原生实现的核心在于把交互逻辑放到事件驱动的模型中。通过对每个分组设置一个事件监听器（可使用事件委托），在点击事件发生时定位到具体的项并执行状态刷新。状态管理的重点是统一维护当前激活项，确保同组内只有一个项带有 active 类。
为了保持高效，尽量减少 DOM 重排与重绘的次数：在一个分组内先清理所有项的激活状态，再把激活状态应用到目标项；同时维护一个对外暴露的事件（如 exclusive-change）以便上层逻辑监听激活变化。
2.1 初始化与默认激活项
在初始阶段，可以支持两种默认设定：第一种是显式标记某项为默认激活（例如添加 data-default），第二种则采用分组中的第一项作为默认激活对象。这样可确保页面加载时分组已经呈现出清晰的激活状态。
在实现中，初始化逻辑应当尽量简洁：遍历每个分组，找到要激活的项并调用统一的设置函数来应用激活状态。这样可以确保后续的点击事件只需要调用同一套接口即可完成状态更新。
2.2 状态转换、无冲突更新与无障碍
状态转换的核心是将目标项设为激活，同时把同组内其他项的激活移除。实现时应使用 classList 的 toggle 与 remove 操作组合，确保一次性完成清理与设置，避免中间状态导致的视觉不一致。
无障碍方面，建议对每个项设置 aria-selected，并在激活切换时更新该属性，同时为分组容器设置 role="group"，为每个项设置 role="button" 或者将其语义明确为可以点击的按钮。这样无障碍工具能够更好地解释当前状态。
3. 完整实现代码示例（纯原生 JavaScript）
以下给出一个可直接使用的纯原生实现模板，支持分组、点击切换、以及键盘导航。示例以一个简单的按钮组为场景，适合嵌入到任意网页中。你可以把它改造成对多个分组并存的情况。
3.1 简单版本：只有点击切换
// 简单版本：仅通过点击切换同组内的激活项
(function(){// 选择所有标记为 data-exclusive 的分组const groups = document.querySelectorAll('[data-exclusive]');groups.forEach(group => {const items = Array.from(group.querySelectorAll('.exclusive-item'));if (!items.length) return;// 初始化：优先使用 data-default 的项let active = items.find(i => i.hasAttribute('data-default')) || items[0];setActive(group, active);// 事件委托，点击任一项即激活group.addEventListener('click', (e) => {const target = e.target.closest('.exclusive-item');if (!target || !group.contains(target)) return;setActive(group, target);});function setActive(group, item){ // 取消当前分组内所有项的激活items.forEach(i => i.classList.remove('active'));// 给目标项设为激活item.classList.add('active');// ARIA 状态更新items.forEach(i => i.setAttribute('aria-selected', 'false'));item.setAttribute('aria-selected', 'true');// 可选：派发自定义事件，外部可以监听group.dispatchEvent(new CustomEvent('exclusive-change', { detail: { active: item } }));}});
})();3.2 完整版本：包含键盘导航与无障碍支持
// 完整版本：支持点击、键盘方向键导航、Home/End 快捷切换
(function(){const groups = document.querySelectorAll('[data-exclusive]');groups.forEach(group => {const items = Array.from(group.querySelectorAll('.exclusive-item'));if (!items.length) return;// 初始化：若存在默认项，优先使用它；否则使用第一个let active = items.find(i => i.hasAttribute('data-default')) || items[0];setActive(group, active, false);// 点击切换group.addEventListener('click', (ev) => {const target = ev.target.closest('.exclusive-item');if (!target || !group.contains(target)) return;setActive(group, target, true);});// 键盘导航：ArrowLeft/ArrowRight 或 Home/Endgroup.addEventListener('keydown', (ev) => {const focused = document.activeElement.closest('.exclusive-item');if (!focused || !group.contains(focused)) return;const idx = items.indexOf(focused);if (ev.key === 'ArrowRight' || ev.key === 'ArrowDown') {ev.preventDefault();const next = items[(idx + 1) % items.length];setActive(group, next, true);next.focus();} else if (ev.key === 'ArrowLeft' || ev.key === 'ArrowUp') {ev.preventDefault();const prev = items[(idx - 1 + items.length) % items.length];setActive(group, prev, true);prev.focus();} else if (ev.key === 'Home') {ev.preventDefault();setActive(group, items[0], true);items[0].focus();} else if (ev.key === 'End') {ev.preventDefault();setActive(group, items[items.length - 1], true);items[items.length - 1].focus();} else if (ev.key === 'Enter' || ev.key === ' ') {ev.preventDefault();setActive(group, focused, true);}});function setActive(group, item, dispatch = true){// 清理同组内激活状态items.forEach(i => {i.classList.toggle('active', i === item);i.setAttribute('aria-selected', i === item ? 'true' : 'false');});// 如果有需要，分组级别也可维护一个当前激活的值if (dispatch) {group.dispatchEvent(new CustomEvent('exclusive-change', { detail: { active: item } }));}}});
})();4. 性能、兼容性与无障碍的落地要点
在实际项目中，原生 JavaScript 的实现应关注以下要点：减少全局事件监听数量，优先使用 事件委托，尽量让 DOM 操作集中在少数关键节点；通过 classList 与 aria-* 属性保证性能与可访问性。
兼容性方面，现代浏览器都原生支持 classList、closest、addEventListener 等 API，因此上述实现可以覆盖绝大多数桌面端和移动端用户。对于极端旧浏览器，可以在不影响核心功能的前提下增加简单回退逻辑，例如在不支持 closest 时改用手动祖先遍历。
无障碍方面，除了设置 aria-selected 外，建议为分组容器设置 role="group"，为每一个可交互项设置 role="button"，并确保可聚焦（focusable）以便键盘用户能够通过浏览器默认逻辑进行操作。
