本文详解如何通过事件委托与类名管理，确保点击时仅高亮当前 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') 精准定位唯一目标，语义清晰、性能最优。
通过以上改造，即可实现真正的「单击单高亮」行为：无论用户点击哪个
