使用JavaScript点击导航栏链接切换li-active激活类异常问题求解

问题原因 #

你给li绑定了点击事件，但li内部包含div、svg等子元素，实际点击时如果命中这些子元素，e.target 会指向被点击的子元素而非外层的li，导致li-active类被错误添加到子元素上，原本绑定在li上的清除逻辑不会处理子元素的类名，就会出现多个元素同时带li-active类的情况。

解决方案 #

将代码中的e.target替换为e.currentTarget即可，e.currentTarget始终指向绑定了点击事件的li元素：

menuBtn.forEach((li) => {
  li.addEventListener("click", (e) => {
    menuBtn.forEach((el) => el.classList.remove("li-active"));
    e.currentTarget.classList.add("li-active");
  });
});

如果需要更稳妥的兼容处理，也可以主动向上查找最近的li元素：

menuBtn.forEach((li) => {
  li.addEventListener("click", (e) => {
    const currentLi = e.target.closest('.navbar__links--li')
    if (!currentLi) return
    menuBtn.forEach((el) => el.classList.remove("li-active"))
    currentLi.classList.add("li-active")
  });
});

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