本文详解如何通过事件委托与类名管理，确保点击时仅高亮当前 li 元素，同时自动移除其他 li 的 active 状态，避免多元素误激活问题。
本文详解如何通过事件委托与类名管理，确保点击时仅高亮当前 li 元素，同时自动移除其他 li 的 active 状态，避免多元素误激活问题。
在实际开发中，为列表项（
✅ 正确做法：单选模式 + 状态归一化
核心逻辑有两点：
- 移除旧状态：每次点击前，先查找并移除文档中已存在的 .active 元素；
- 添加新状态：再将 active 类精准添加到当前被点击的元素上（使用 e.currentTarget 而非闭包变量，更健壮）。
以下是优化后的完整实现：
const lis = document.querySelectorAll('.li'); lis.foreach(li => { li.addEventListener('click', (e) => { // 安全移除之前已激活的元素（可选链避免报错） document.querySelector('.active')?.classList.remove('active'); // 为当前点击元素添加 active 类 e.currentTarget.classList.add('active'); }); });对应的 CSS 保持简洁清晰：
ul { list-style: none; display: flex; justify-content: center; } .li { margin: 0 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid black; border-radius: 0.25rem; cursor: pointer; transition: color 0.2s; /* 推荐添加过渡效果 */ } .li:hover { background-color: #ccc; } .li.active { color: red; }? 关键说明
- e.currentTarget 始终指向绑定事件监听器的元素（即当前 li），比闭包中的 li 变量更可靠，尤其在动态 dom 场景下；
- document.querySelector(‘.active’)?.classList.remove(…) 使用可选链操作符（?.），当无匹配元素时静默跳过，不抛出错误，提升鲁棒性；
- 若需支持「取消选中」（即再次点击已激活项则取消高亮），可扩展为切换逻辑：e.currentTarget.classList.toggle(‘active’)，但需配合移除其他项的逻辑（当前方案已满足单选需求）。
? 常见误区提醒
- ❌ 不要依赖 forEach 闭包中的 li 变量做状态判断（如 li.classList.contains(‘active’)），因无法感知全局状态变化；
- ❌ 避免用 getElementsByTagName(‘li’) 或重复查询所有 li 再遍历移除——效率低且易漏；
- ✅ 推荐统一用 document.querySelector(‘.active’) 精准定位唯一目标，语义清晰、性能最优。
通过以上改造，即可实现真正的「单击单高亮」行为：无论用户点击哪个