如何在HTML5页面中动态为导航选项添加active类

我帮你排查了几个关键问题，这应该就是导致active类没生效的核心原因：

1. 错误的元素目标 #

你明确说要给对应的<li>添加active类，但你的jQuery代码是给<a>标签加了这个类——而Bootstrap的nav-pills样式是依赖<li>上的active类实现高亮的，所以就算给<a>加上类也不会有视觉效果。

2. jQuery的addClass方法使用错误 #

jQuery的addClass()并不支持第二个布尔参数来实现条件添加类，这个写法是完全无效的。你需要用条件判断语句来控制是否给目标元素添加/移除类。

3. 代码语法不完整 #

你的jQuery代码最后缺少了闭合的});，这会直接导致代码无法正常执行（虽然你提到控制台路径匹配正常，可能是粘贴时遗漏，但还是要确保语法完整）。

修正后的完整jQuery代码 #

$(document).ready(function() {
  var loc = window.location.pathname;
  loc = loc.substring(1); // 去掉开头的斜杠，和href的格式匹配
  console.log("当前页面路径：", loc);

  $('.dynamic-highlight a').each(function() {
    var linkHref = $(this).attr('href');
    console.log("链接目标路径：", linkHref);
    
    // 精准匹配路径，匹配后给父级li加active类
    if (linkHref === loc) {
      $(this).parent('li').addClass('active');
      // 可选：移除其他li的active类，避免多个导航项同时高亮
      $(this).parent('li').siblings().removeClass('active');
      return false; // 找到匹配项后退出循环，提升性能
    }
  });
});

额外验证点 #

• 确认jQuery库是在这段代码之前引入的——如果jQuery还没加载，这段代码会直接报错$ is not defined。
• 检查浏览器控制台有没有其他报错信息，比如DOM元素找不到的提示。
• 你用document.write生成菜单，且menu()是在body里直接调用的，所以菜单DOM在$(document).ready之前就已经存在了，不需要担心DOM加载顺序的问题。

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