本文详解如何通过 JavaScript 精确控制单个 元素的 active 类切换，解决“点击一个列表项却影响多个元素”的常见问题，并提供健壮、可复用的事件处理方案。

本文详解如何通过 javascript 精确控制单个 `

` 元素的 `active` 类切换，解决“点击一个列表项却影响多个元素”的常见问题，并提供健壮、可复用的事件处理方案。

在构建交互式导航菜单、标签页或选项列表时，常需为用户点击的

添加视觉反馈（如高亮、变色）。但若未正确管理状态，容易出现「多个

同时拥有 .active 类」的问题——这不仅破坏 UI 一致性，也违背单选交互逻辑。

根本原因在于：原始代码仅执行 li.classList.add('active')，却未移除其他已激活元素的类。每次点击都累加而非切换，导致历史点击项持续保留 .active。

✅ 正确做法是：点击时先清除全局已有 .active，再为当前目标添加。推荐使用 event.currentTarget（精准指向绑定事件的元素）配合可选链操作符（?.）提升容错性：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

const lis = document.querySelectorAll('.li');
lis.forEach(li => {
  li.addEventListener('click', (e) => {
    // 安全移除已存在的 active 类（若无则静默跳过）
    document.querySelector('.active')?.classList.remove('active');
    // 为当前被点击的 li 添加 active 类
    e.currentTarget.classList.add('active');
  });
});

? 关键要点说明：

• e.currentTarget 始终指向事件监听器绑定的元素（即当前遍历的 li），比 e.target 更可靠（避免子元素触发时取错节点）；
• document.querySelector('.active')?.classList.remove('active') 利用可选链确保：当页面中无 .active 元素时不会报错，提升代码鲁棒性；
• 此方案天然支持「单选模式」——无论用户点击多少次、点击顺序如何，始终仅有一个
• 处于激活态。

? 进阶建议：
若需支持「取消激活」（即再次点击已激活项时移除状态），可改用 toggle()：

e.currentTarget.classList.toggle('active');
// 同时需移除其他项的 active（保持单选）
document.querySelectorAll('.li').forEach(el => {
  if (el !== e.currentTarget) el.classList.remove('active');
});

最后，请确保 CSS 中 .li.active 样式定义明确（如示例中的 color: red），并验证 HTML 结构中

确实携带 .li 类——避免因选择器不匹配导致样式失效。该方案简洁、高效，适用于任何基于类名的状态管理场景。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！