Bootstrap导航栏点击高亮：active类添加移除问题排查

下面是几种你可能踩坑的情况，对应排查调整即可：

1. DOM加载顺序错误 #

如果你的jQuery代码写在导航栏HTML之前，又没包裹在DOM就绪事件里，浏览器还没渲染出导航元素，代码就执行了，自然绑定不上点击事件。必须把逻辑放进$(document).ready()（或简写$(function(){...})）里：

$(function() {
  // 导航点击逻辑写这里
});

2. 选择器或目标元素错误 #

Bootstrap的导航高亮通常是给父级容器（比如.nav-item或<li>）加active类，而不是直接给<a>标签加。如果你的导航结构是：

<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link" href="/home">首页</a>
  </li>
</ul>

那点击<a>后，要找到它的父级.nav-item再加active，而不是给<a>本身加。

3. 未移除其他项的active类 #

如果逻辑里只给自己加active，之前的高亮项不会自动取消，导致多个项同时高亮。正确的逻辑是先清空所有项的active，再给当前项加上：

$('.nav-link').click(function(e) {
  // 不需要跳转的话阻止默认行为
  e.preventDefault();
  // 移除所有导航项的active类
  $('.nav-item').removeClass('active');
  // 给当前点击项的父容器加active
  $(this).closest('.nav-item').addClass('active');
});

4. 动态生成的导航未用事件委托 #

如果导航项是通过JS动态添加的，直接绑定click事件会失效，必须用事件委托绑定到父级（或document）：

$(document).on('click', '.nav-link', function(e) {
  e.preventDefault();
  $('.nav-item').removeClass('active');
  $(this).closest('.nav-item').addClass('active');
});

5. 多页面跳转后高亮失效 #

如果是跨页面的导航，点击后页面会刷新，前端设置的active会重置。这种情况要根据当前页面的URL匹配导航项的href来设置：

$(function() {
  var currentUrl = window.location.pathname;
  $('.nav-link').each(function() {
    if ($(this).attr('href') === currentUrl) {
      $(this).closest('.nav-item').addClass('active');
    }
  });
});

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