点击列表项添加活动样式方法

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

根本原因在于：原始代码仅执行 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 结构中

以上就是《点击列表项添加活动样式方法》的详细内容，更多关于的资料请关注golang学习网公众号！