JavaScript IF语句修改链接类名功能异常求助

我帮你排查了代码逻辑，大概率是把赋值运算符 = 和相等比较运算符搞混了——这是JS新手很容易踩的坑！

常见错误场景 #

如果你的代码里写了类似这样的判断：

let currentPage = window.location.href.split('/').pop();
// 这里用了 = 而不是 ===，是赋值不是比较！
if (currentPage = 'home') {
  document.querySelector('a[href="/home"]').classList.add('active');
}

currentPage = 'home' 是赋值操作，它会把字符串'home'赋给currentPage，同时这个表达式的返回值就是'home'（非空字符串在布尔判断里是true），所以不管当前URL是什么，if条件都会成立，代码每次都会执行。

修正方案 #

把赋值运算符改成严格相等运算符 ===（推荐用严格相等，避免类型转换带来的意外）：

// 先获取当前页面的路径部分，建议用pathname更靠谱，避免URL参数/哈希干扰
let currentPage = window.location.pathname.split('/').pop();

// 用严格相等做条件判断
if (currentPage === 'home') {
  const targetLink = document.querySelector('a[href="/home"]');
  // 先判断元素是否存在，避免报错
  if (targetLink) {
    targetLink.classList.add('active');
  }
}

额外优化点 #

如果你的URL可能带参数（比如home?id=1）或者哈希（比如home#about），可以先把这些部分去掉，保证匹配准确：

let rawPage = window.location.href.split('/').pop();
// 去掉问号和哈希后面的内容
let currentPage = rawPage.split(/[?#]/)[0];

if (currentPage === 'home') {
  const targetLink = document.querySelector('a[href="/home"]');
  if (targetLink) {
    targetLink.classList.add('active');
  }
}

这样修改后，if语句就会只在currentPage严格等于'home'的时候才执行添加类名的操作啦！

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