URL无二级路径时导航链接全激活的jQuery问题求助

嘿，我完全懂你遇到的困扰！当访问网站首页（路径是 /）时，原来的代码会把所有导航链接都加上 selected 类，这是因为 location.pathname 返回的 / 会被所有带斜杠的链接的 href 包含（比如 /index.php、/contact-us.php 里都有 /），所以 indexOf(current) 永远不等于 -1，导致所有链接都被误激活。

问题根源分析 #

你的原代码逻辑是“检查链接的 href 是否包含当前路径”，这个逻辑在非首页时没问题，但首页的路径是最基础的 /，几乎所有相对路径的链接都会包含它，所以触发了错误的匹配。

修复方案 #

这里有两种简单的修复方式，你可以根据自己的需求选择：

方案1：单独处理首页逻辑 #

先判断当前是否是首页路径，只给首页对应的链接添加激活类；其他页面保持原逻辑：

$(function () { 
  var current = location.pathname; 
  
  $('nav li a').each(function () { 
    var $this = $(this); 
    var linkHref = $this.attr('href');
    
    // 首页特殊处理：只匹配指向首页的链接
    if (current === '/') {
      // 这里根据你首页链接的实际 href 调整，比如是 "/" 或者 "/index.php"
      if (linkHref === '/' || linkHref === '/index.php') {
        $this.addClass('selected');
      }
    } else {
      // 非首页用原逻辑匹配
      if (linkHref.indexOf(current) !== -1) {
        $this.addClass('selected');
      }
    }
  }) 
});

方案2：统一路径匹配规则 #

把首页的路径 / 替换成你首页链接实际的 href（比如 /index.php），然后用严格相等的方式匹配，这样逻辑更严谨：

$(function () { 
  var current = location.pathname; 
  
  // 如果是首页路径，替换成首页链接的实际 href
  if (current === '/') {
    current = '/index.php';
  }
  
  $('nav li a').each(function () { 
    var $this = $(this); 
    // 用严格相等替代 indexOf，避免部分匹配的错误
    if ($this.attr('href') === current) { 
      $this.addClass('selected'); 
    } 
  }) 
});

为什么你之前的修复没生效？ #

你之前尝试的代码是在循环里判断 $this.attr('href') === window.location.href，但 window.location.href 是完整的URL（比如 https://www.domain.com），而你的导航链接用的是相对路径（比如 /index.php），两者永远不会相等；而且修改链接的 href 也不是正确的做法——这会改变链接的实际跳转地址，不是我们想要的激活状态逻辑。

这样调整后，首页就只会给对应的导航链接添加激活类，其他页面的逻辑也能正常工作啦！

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