JavaScript 实现页面导航高亮：精准路径匹配指南

2025-02-03 09:33:42

利用 JavaScript 实现页面导航高亮

在构建侧边导航时，经常需要在用户访问不同页面时，高亮显示当前页面的对应菜单项。这能提供更清晰的导航反馈，提高用户体验。然而，直接使用 window.location.pathname 进行匹配可能会遇到问题，因为它只返回路径部分，不包含域名或查询参数，在某些情况下导致匹配失败。下面分析常见问题并提供有效解决方案。

路径匹配的挑战

问题的核心在于 window.location.pathname 返回值的局限性。pathname 仅仅提供URL中路径的部分，例如 /link1.html。而<a>标签的 href 属性可能包含绝对路径 (如 /link1.html 或 http://example.com/link1.html) 或是相对路径 (link1.html). 当链接的 href 与 window.location.pathname 的返回内容不完全一致时，基于路径字符串直接比较会失效，造成导航栏高亮显示错误。

解决方案：统一比较标准

要解决这个问题，需要一种更稳健的方式来比较链接的 href 与当前页面的 URL。可以使用 URL 对象来解析 href，确保所有链接在对比时基于相同的标准。

代码示例：URL 对象解析法

document.querySelectorAll('.menuLink').forEach((link) => {
  try {
        const linkHref = new URL(link.href, window.location.origin);
        const currentHref = new URL(window.location.href);
        
        if (linkHref.pathname === currentHref.pathname) {
            link.classList.add('active');
        }

    } catch(e) {
       console.error("Could not process a url:", e, link.href);
    }
});

工作原理

document.querySelectorAll('.menuLink'): 选择所有具有 menuLink class 的 <a> 标签，获取需要处理的所有导航项。
forEach：对每个选定的 <a> 元素进行迭代。
try...catch: 包裹代码确保解析失败时能正常运行并报错.
new URL(link.href, window.location.origin): 对于每个 <a> 标签，使用 new URL() 构造函数。此构造函数接收两个参数：链接的href属性和一个用于解析相对URL的基础URL。window.location.origin 获取当前页面的域名，保证无论href 是相对路径还是绝对路径，都能准确解析出URL。
new URL(window.location.href): 同样用 URL() 构造函数创建当前页面url对象，可以有效提取pathname。
if (linkHref.pathname === currentHref.pathname): 提取URL对象的pathname属性进行对比，对比 link 和当前页面的路径是否相同。
link.classList.add('active'): 若 pathname 相等，则添加 active 类，从而高亮对应的菜单项。

操作步骤

将此JavaScript代码片段包含到 HTML 文件中，建议放在 <script> 标签内，位于 <body> 标签的结束之前，或在你的 JavaScript 代码文件中执行。
确认 <a> 标签具有 menuLink 类，并且 href 属性指向相应的页面。
引入 CSS 样式，用于定义 active 类的视觉效果，如修改背景色或文字样式等。

改进建议：考虑页面锚点

有时候链接除了跳转页面还包含锚点(hash),例如 link1.html#section2。简单的使用 pathname 比较，可能导致含有锚点的链接，在高亮显示上出现问题。可以通过增加对 hash 的对比，解决该问题。

document.querySelectorAll('.menuLink').forEach((link) => {
  try {
        const linkHref = new URL(link.href, window.location.origin);
        const currentHref = new URL(window.location.href);
        
        if (linkHref.pathname === currentHref.pathname && linkHref.hash === currentHref.hash) {
            link.classList.add('active');
        }

    } catch(e) {
       console.error("Could not process a url:", e, link.href);
    }
});

修改了 if 条件, 在 pathname 一致的前提下，还会比较hash是否一致。从而保证了更全面的匹配。

注意事项

避免重复的类名。若有多个标签匹配条件，都添加了active，这不是你想要的。可以利用 classList.remove('active') 将所有 active 移除，再根据条件给匹配元素添加类。
如果href 设置为 Javascript 的伪协议，比如 href="javascript:void(0);" 则不能正常匹配，最好使用空连接，或是直接使用 button 并附加跳转操作。

通过以上方案，可以在侧边栏导航实现精准的当前页面高亮显示，从而增强用户体验。合理的使用 URL 对象是进行可靠的路径匹配关键，同时注意特殊情况的链接，以及锚点的影响，能使得程序更可靠。