页面加载后为WordPress自定义菜单的当前链接添加active类

没问题，我来帮你搞定这个需求！既然没法用WordPress默认的当前菜单项标记，我们可以用jQuery来对比当前页面URL和导航链接的href，自动给匹配的链接加上active类。

完整实现代码 #

首先是你的HTML结构（保持不变）：

<div class="nav"> 
  <ul id="menu"> 
    <li><a href="/item1">item1</a></li> 
    <li><a href="/item2">item2</a></li> 
    <li><a href="/item3">item3</a></li> 
  </ul>
</div>

然后是完整的jQuery代码：

$(document).ready(function() {
  // 获取当前页面的路径（不带域名和参数）
  var currentPath = window.location.pathname;
  // 如果URL带参数，先去掉参数部分（可选）
  // currentPath = currentPath.split('?')[0];

  // 遍历所有导航链接
  $('#menu li a').each(function() {
    var linkHref = $(this).attr('href');
    // 精确匹配：适合每个菜单项对应独立页面
    if (currentPath === linkHref) {
      $(this).addClass('active');
      // 同时给父级li也加active类（方便做li的样式，可选）
      $(this).parent('li').addClass('active');
    }

    // 模糊匹配：适合子页面匹配父菜单（比如/item1/sub 匹配 /item1）
    // if (currentPath.indexOf(linkHref) === 0 && linkHref !== '/') {
    //   $(this).addClass('active');
    //   $(this).parent('li').addClass('active');
    // }
  });

  // 单独处理首页（如果首页href是"/"）
  // if (currentPath === '/') {
  //   $('#menu li a[href="/"]').addClass('active').parent('li').addClass('active');
  // }
});

代码说明 #

• window.location.pathname：获取当前页面的路径部分（比如访问https://yourdomain.com/item2时，这个值就是/item2）
• 精确匹配：适合每个菜单项对应独立的页面，只有当路径完全一致时才添加active类
• 模糊匹配：如果你的网站有子页面（比如/item1/detail），想要让父菜单/item1也保持激活状态，可以用indexOf来匹配路径开头
• 给父级li加active类：很多时候我们需要给整个菜单项（li）做样式，比如背景色、边框，所以这一步很实用

注意事项 #

• 确保你的链接href是相对路径（比如/item1），而不是带完整域名的绝对路径，否则对比会失败
• 如果你的WordPress固定链接设置是默认的（带?p=123这种参数），记得用split('?')[0]去掉参数部分再对比

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