如何仅使用JavaScript为菜单项添加active类？代码运行异常求排查

代码错误点 #

• 第一处：事件回调里的RemoveActive没有加括号，属于只引用函数没有实际执行，导致移除所有active类的逻辑完全没生效，之前加的active类不会被清除，点一个加一个就出现所有导航都有active类的问题。
• 第二处：RemoveActive函数内部存在冗余逻辑，循环过程中反复查询document.querySelector('.active')没有必要，只要直接遍历所有li元素移除active类即可。
• 可选优化：绑定点击事件时可以直接用this指向当前被点击的li元素，不用依赖循环变量i，逻辑更稳妥。

修正后可运行代码 #

// 找到所有li标签
const liTags = document.querySelectorAll('li');

// 移除所有li上的active类
function RemoveActive() {
    liTags.forEach(li => {
        li.classList.remove('active');
    })
}

// 给每个li绑定点击事件
liTags.forEach(li => {
    li.addEventListener('click', function() {
        RemoveActive();
        this.classList.add('active');
    })
})

内容的提问来源于stack exchange，提问作者Teak