navbar-nav nav-item无法添加active类，点击菜单高亮异常求助

嗨，我来帮你搞定这个导航高亮的小问题！你现在遇到的情况是因为只有静态的HTML结构，没有添加交互逻辑来切换active类——默认第一个li的active类是写死的，点击其他链接时自然不会自动转移这个类。

先看看你当前的代码：

<ul class="navbar-nav ml-auto"> 
  <li class="nav-item active"> 
    <a class="nav-link" href="/"><i class="fa fa-home" aria-hidden="true"></i>Home</a> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link" href="about">About</a> 
  </li> 
</ul>

下面给你两种场景的解决方案：

1. 单页应用/不刷新页面的情况（纯前端交互） #

如果你的页面是单页应用，点击链接不会刷新页面，那可以用JavaScript监听点击事件，手动切换active类：

<ul class="navbar-nav ml-auto"> 
  <li class="nav-item active"> 
    <a class="nav-link" href="/"><i class="fa fa-home" aria-hidden="true"></i>Home</a> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link" href="about">About</a> 
  </li> 
</ul>

<script>
// 获取所有导航菜单项的链接
const navLinks = document.querySelectorAll('.nav-link');

navLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    // 先移除所有li的active类
    document.querySelectorAll('.nav-item').forEach(item => {
      item.classList.remove('active');
    });
    // 给当前点击的链接的父元素li添加active类
    this.parentElement.classList.add('active');
  });
});
</script>

2. 多页应用/页面会刷新的情况 #

如果点击链接后页面会刷新（比如传统的服务器渲染页面），那需要在页面加载时根据当前URL来匹配对应的菜单项，添加active类：

<ul class="navbar-nav ml-auto"> 
  <li class="nav-item"> 
    <a class="nav-link" href="/"><i class="fa fa-home" aria-hidden="true"></i>Home</a> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link" href="about">About</a> 
  </li> 
</ul>

<script>
// 获取当前页面的路径
const currentPath = window.location.pathname;

// 遍历所有导航链接，匹配路径后添加active类
document.querySelectorAll('.nav-link').forEach(link => {
  const linkPath = link.getAttribute('href');
  // 注意处理根路径和相对路径的匹配
  if ((currentPath === '/' && linkPath === '/') || currentPath.includes(linkPath)) {
    link.parentElement.classList.add('active');
  }
});
</script>

这样修改后，不管是点击切换还是页面刷新，对应的菜单项都会正确高亮啦！

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