简单实现当前菜单导航高亮的js代码

要实现当前菜单导航高亮的效果，可以通过JavaScript来动态地添加一个CSS类，以突出显示当前页面所对应的菜单项。以下是一个简单的实现示例：

HTML结构

<ul class="nav">
  <li><a href="/home">首页</a></li>
  <li><a href="/about">关于我们</a></li>
  <li><a href="/services">服务</a></li>
  <li><a href="/contact">联系我们</a></li>
</ul>

CSS样式

.nav li.active a {
  color: red; /* 或者其他高亮的样式 */
}

JavaScript代码

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有的导航链接
  var navLinks = document.querySelectorAll('.nav a');

  // 遍历每个链接
  navLinks.forEach(function(link) {
    // 检查当前链接的href属性是否与当前URL匹配
    if (link.getAttribute('href') === window.location.pathname) {
      // 如果匹配，给对应的li元素添加active类
      link.parentNode.classList.add('active');
    }
  });
});

解释

1. HTML结构：创建一个包含导航链接的无序列表。
2. CSS样式：定义一个.active类，用于设置高亮样式。
3. JavaScript代码：
   • 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
   • 获取所有的导航链接。
   • 遍历每个链接，检查其href属性是否与当前页面的路径（window.location.pathname）匹配。
   • 如果匹配，则给该链接的父元素（即<li>）添加active类。

应用场景

• 单页应用（SPA）：在单页应用中，页面不会完全刷新，但可以通过JavaScript动态更新URL和菜单高亮。
• 多页网站：在传统的多页网站中，每次页面加载时都可以通过上述脚本自动设置高亮。

优势

• 用户体验：用户可以清晰地看到当前所在页面的位置。
• 代码简洁：实现简单，易于维护。

可能遇到的问题及解决方法

• 动态路由问题：如果页面使用了动态路由（如/user/:id），直接比较href可能不准确。可以通过正则表达式或更复杂的路径匹配逻辑来解决。
• 性能问题：对于大型导航菜单，遍历所有链接可能会影响性能。可以通过优化选择器或使用更高效的数据结构来改善。

通过上述方法，可以有效地实现菜单导航的高亮效果，提升用户体验。