js 当前页高亮

在 JavaScript 中实现当前页高亮通常涉及到以下几个基础概念：

基础概念

1. DOM 操作：JavaScript 可以通过 DOM API 操作 HTML 文档的结构、样式和内容。
2. 事件监听：通过监听用户的点击事件或其他交互事件，可以动态改变页面元素的样式。
3. CSS 类操作：通过 JavaScript 添加或移除 CSS 类，可以实现样式的动态变化。

实现步骤

1. HTML 结构：确保每个导航链接都有一个唯一的标识符（如 id 或 class）。
2. CSS 样式：定义一个高亮样式类，例如 .active。
3. JavaScript 逻辑：在页面加载时或用户点击导航链接时，动态添加或移除 .active 类。

示例代码

HTML

<nav>
  <ul>
    <li><a href="/home" class="nav-link">Home</a></li>
    <li><a href="/about" class="nav-link">About</a></li>
    <li><a href="/contact" class="nav-link">Contact</a></li>
  </ul>
</nav>

CSS

.nav-link.active {
  color: red; /* 高亮样式 */
  font-weight: bold;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  // 获取当前 URL
  const currentPath = window.location.pathname;

  // 获取所有导航链接
  const navLinks = document.querySelectorAll('.nav-link');

  // 遍历所有导航链接
  navLinks.forEach(link => {
    // 如果链接的 href 属性与当前路径匹配，则添加 'active' 类
    if (link.getAttribute('href') === currentPath) {
      link.classList.add('active');
    }
  });
});

优势

1. 用户体验：用户可以清楚地看到当前所在页面，提升导航的直观性。
2. 灵活性：可以轻松地通过修改 CSS 类来改变高亮样式。
3. 可维护性：代码结构清晰，易于维护和扩展。

应用场景

• 单页应用（SPA）：在 SPA 中，页面内容通过 JavaScript 动态加载，当前页高亮可以帮助用户了解当前所在位置。
• 多页应用（MPA）：在传统的多页应用中，当前页高亮可以提升用户体验。

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

1. 路径不匹配：确保 window.location.pathname 与导航链接的 href 属性完全匹配。
2. 动态内容加载：如果页面内容是动态加载的，确保在内容加载完成后执行高亮逻辑，可以在 DOMContentLoaded 事件中处理。
3. 多语言支持：如果网站支持多语言，确保路径匹配逻辑考虑了语言前缀。

通过以上步骤和示例代码，你可以轻松实现当前页高亮功能，提升用户体验。