导航栏激活标签颜色切换功能失效，无法为活跃项添加active类

错误排查与修正方案 #

你的代码共有2处核心错误，修正后即可实现导航激活效果：

• DOM选择器语法错误：
  你要选择类名为nav-list下的a标签，类选择器需要加.前缀，原代码document.querySelectorAll('nav-list a')无法匹配到任何元素，修正为document.querySelectorAll('.nav-list a')。
• 类名赋值逻辑错误：
  直接给className赋值会覆盖a标签原有的navlink类，推荐使用classList.add()方法追加active类，避免影响原有样式。
  额外优化建议：用完整href路径匹配存在域名、参数干扰的风险，改为匹配路径名兼容性更好。

修正后的完整JS代码：

// 取当前页面路径，避免域名/端口/参数干扰
const currentPath = location.pathname;
const menuItem = document.querySelectorAll('.nav-list a');
const menuLength = menuItem.length;

for(let i = 0; i < menuLength; i++){
    if(menuItem[i].pathname === currentPath){
        menuItem[i].classList.add('active');
    }
}

你的HTML和CSS代码无需修改，替换JS代码即可生效。

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