基于当前URL设置导航active类的问题及修复方法咨询

咱们来一步步解决你遇到的这两个问题，先搞清楚问题根源，再调整代码：

问题原因分析 #

1. 首页所有链接变active：当访问首页时，location.pathname的值是"/"，而所有导航链接的href都包含"/"，原代码的indexOf判断会对所有链接返回true，导致全部加上active类。
2. 子页面父链接无active：原代码的判断逻辑搞反了——你写的是检查链接的href是否包含当前路径，但实际我们需要的是当前路径是否包含链接的href（作为父路径），所以子页面时根本匹配不上。

修复方案（两种可选） #

方案一：简单直观的路径匹配（适合路径层级清晰的场景）

这个方案通过统一路径格式（强制结尾加斜杠），用startsWith来判断父路径关系：

jQuery(function($){
  var current = location.pathname;
  
  // 统一非首页路径的格式：结尾加斜杠
  if (current !== '/' && !current.endsWith('/')) {
    current += '/';
  }
  
  $('.nav ul li a').each(function(){
    var $this = $(this);
    var linkHref = $this.attr('href');
    
    // 首页单独处理：仅匹配根路径链接
    if (current === '/') {
      if (linkHref === '/') {
        $this.addClass('active');
      }
    } else {
      // 统一链接路径的格式：结尾加斜杠
      if (!linkHref.endsWith('/')) {
        linkHref += '/';
      }
      // 判断当前路径是否以链接路径开头，确保子页面时父链接激活
      if (current.startsWith(linkHref)) {
        $this.addClass('active');
      }
    }
  });
});

方案二：正则精确匹配（避免类似路径误匹配）

如果你的站点有类似/something和/something-else这种容易混淆的路径，用正则匹配更严谨：

jQuery(function($){
  var current = location.pathname;
  
  $('.nav ul li a').each(function(){
    var $this = $(this);
    var linkHref = $this.attr('href');
    
    // 首页逻辑：仅匹配根路径
    if (current === '/') {
      linkHref === '/' && $this.addClass('active');
    } else {
      // 构建正则：匹配以链接路径开头，后续要么是斜杠要么是路径结尾
      // 先去掉链接路径的结尾斜杠，避免重复匹配
      var cleanLinkHref = linkHref.replace(/\/$/, '');
      var matchRegex = new RegExp('^' + cleanLinkHref + '(/|$)');
      
      if (matchRegex.test(current)) {
        $this.addClass('active');
      }
    }
  });
});

方案说明 #

• 两种方案都单独处理了首页的特殊情况，避免所有链接误激活。
• 方案一用startsWith简单直接，适合路径没有重名前缀的场景；方案二用正则可以精准区分类似路径，更健壮。

内容的提问来源于stack exchange，提问作者Jacob K.