本文详解如何通过原生 JavaScript 实现点击菜单项时自动移除其他项的 active 类并为当前项添加该类，重点修复因误用 [] 调用 forEach 导致 NodeList 遍历失败的经典错误。
本文详解如何通过原生 javascript 实现点击菜单项时自动移除其他项的 `active` 类并为当前项添加该类，重点修复因误用 `[]` 调用 `foreach` 导致 nodelist 遍历失败的经典错误。
在构建响应式侧边栏导航菜单时，一个常见需求是：用户点击某一项后，该项高亮（添加 active 类），同时确保此前已激活的项自动取消高亮（移除 active 类）。看似简单，但实践中常因对 DOM API 的细微差异理解不足而失效——正如问题中所示，代码在本地编辑器可运行，却在真实页面中失效。
根本原因在于：document.querySelectorAll() 返回的是 NodeList（非数组），而非真正的 Array。虽然现代浏览器中 NodeList 也支持 .forEach() 方法，但早期写法 [].forEach.call(menuitems, ...) 是试图将数组方法“借用”给 NodeList。然而，问题代码中却错误地将变量名写成了 elems（未定义），而非正确的 menuitems：
// ❌ 错误写法：变量名拼写错误 + 过时的 call 模式
var menuitems = document.querySelectorAll(".leftmenu_item.active");
[].forEach.call(elems, function(el) { // ← "elems" 未声明！应为 "menuitems"
el.classList.remove("active");
});✅ 正确且推荐的写法是直接调用 NodeList.prototype.forEach()（MDN 官方支持），简洁、语义清晰、兼容性良好（Chrome 51+/Firefox 50+/Edge 17+/Safari 10.1+）：
function setActive(element) {
// 1. 查找所有已带 active 类的菜单项
const activeItems = document.querySelectorAll(".leftmenu_item.active");
// 2. 遍历并移除 active 类（直接 forEach，无需 call）
activeItems.forEach(item => item.classList.remove("active"));
// 3. 为当前点击项添加 active 类
element.classList.add("active");
}HTML 结构保持不变，只需确保 onclick 绑定正确：
立即学习“Java免费学习笔记（深入）”；
<ul>
<li class="leftmenu_item active" onclick="setActive(this)">
<a href="#daunenfedern">Daunen & Federn</a>
</li>
<li class="leftmenu_item" onclick="setActive(this)">
<a href="#inlett">Inlett</a>
</li>
<li class="leftmenu_item" onclick="setActive(this)">
<a href="#allergiker">Allergiker</a>
</li>
<li class="leftmenu_item" onclick="setActive(this)">
<a href="#waschmittel">Waschmittel</a>
</li>
</ul>⚠️ 注意事项：
- 避免内联事件处理器：虽然 onclick="setActive(this)" 可用，但更推荐使用 addEventListener 实现关注点分离与更好的可维护性；
- CSS 样式需生效：确保 .active { color: red; } 等样式规则无覆盖或优先级冲突；
- 初始状态一致性：页面加载时应有且仅有一个 .leftmenu_item.active，否则多选逻辑可能异常；
- 无障碍增强：可配合 aria-current="page" 提升可访问性，例如 <li class="active" aria-current="page">。
总结：动态管理 DOM 类的核心在于准确获取元素集合，并使用其原生迭代能力。NodeList.forEach() 是现代标准方案，既规避了 call 的易错性，又消除了手动转换为数组（如 [...menuitems]）的额外开销。掌握这一细节，即可稳健实现任意菜单、标签页或步骤导航的激活态控制。
