如何用jQuery解决子页面主菜单项不高亮问题？

这个问题我碰到过不少，核心原因就是你当前的匹配逻辑太严格了——只对比完整的URL，而进入子页面时（比如/Shipments/View/123这类路径），完整URL和主菜单的/Shipments肯定不相等，自然触发不了高亮。下面给你几个实用的解决方案：

方案一：简单匹配URL包含关系 #

如果你的菜单路径没有重叠（比如不会出现/Ship和/Shipments这种相似路径），可以直接检查当前URL是否包含菜单项的href：

$(function() {
  var url = window.location.href;
  $(".sidebar-nav-icons a").each(function() {
    // 检查当前URL是否包含当前菜单项的链接地址
    if (url.includes(this.href)) {
      $(this).closest("li").addClass("active"); // 替换成你实际使用的高亮类名
    }
  });
});

方案二：精准匹配路径前缀 #

如果担心路径重叠导致误匹配，可以解析URL的路径部分，精准判断当前路径是否是主菜单路径的子路径：

$(function() {
  var currentPath = window.location.pathname; // 获取当前页面的路径部分（比如/Shipments/View）
  $(".sidebar-nav-icons a").each(function() {
    var linkPath = new URL(this.href).pathname; // 解析菜单项链接的路径部分
    // 两种匹配情况：1. 完全相等（主菜单页面） 2. 当前路径以主菜单路径开头且不是主菜单本身（子页面）
    if (currentPath === linkPath || (currentPath.startsWith(linkPath) && currentPath.length > linkPath.length)) {
      $(this).closest("li").addClass("active");
      return false; // 找到匹配项后停止循环，避免多个菜单被高亮
    }
  });
});

额外优化：单独处理首页 #

如果首页路径是/，上面的方案可能会误匹配所有页面（因为所有路径都以/开头），可以单独加个判断：

$(function() {
  var currentPath = window.location.pathname;
  $(".sidebar-nav-icons a").each(function() {
    var linkPath = new URL(this.href).pathname;
    
    // 单独处理首页
    if (currentPath === "/" && linkPath === "/") {
      $(this).closest("li").addClass("active");
      return false;
    }
    // 处理其他菜单的子页面情况
    if (currentPath.startsWith(linkPath) && currentPath !== "/") {
      $(this).closest("li").addClass("active");
      return false;
    }
  });
});

注意事项 #

• 记得把代码里的active替换成你实际使用的高亮类名（就是你原来代码里写的a...对应的完整类名）
• 如果菜单用的是相对路径，new URL(this.href)会自动基于当前域名解析成绝对路径，不用担心路径解析问题

内容的提问来源于stack exchange，提问作者Konstantin Kožuchov