本文详解如何通过 JavaScript 精确控制单个 元素的 active 类切换，解决“点击一个列表项却影响多个元素”的常见问题，并提供健壮、可复用的事件处理方案。
本文详解如何通过 javascript 精确控制单个 `
在构建交互式导航菜单、标签页或选项列表时，常需为用户点击的
根本原因在于：原始代码仅执行 li.classList.add(‘active’)，却未移除其他已激活元素的类。每次点击都累加而非切换，导致历史点击项持续保留 .active。
✅ 正确做法是：点击时先清除全局已有 .active，再为当前目标添加。推荐使用 event.currentTarget（精准指向绑定事件的元素）配合可选链操作符（?.）提升容错性：
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 结构中