JavaScript 中事件委托怎么在侧边栏导航中通过路径匹配高亮当前菜单-js教程-PHP中文网

用事件委托实现侧边栏路径匹配高亮：监听.sidebar点击，通过data-path匹配location.pathname，支持精确/前缀匹配，并在页面加载和路由变化时自动同步active状态。

javascript 中事件委托怎么在侧边栏导航中通过路径匹配高亮当前菜单

在侧边栏导航中用事件委托实现路径匹配高亮，核心是：**不给每个菜单项单独绑定 click 事件，而是监听父容器（如 .sidebar），点击时通过事件冒泡捕获目标，再根据当前 URL 路径匹配并更新高亮状态**。这样既减少内存占用，又支持动态添加菜单项。

1. 结构准备：菜单项需带可识别的路径标识

每个菜单项（<a></a> 或 <li>）应有明确的路由路径信息，推荐用 data-path 属性：

说明：
– data-path 存储用于匹配的「基准路径」，比如 /users/detail 表示匹配所有以该前缀开头的路径；
– 链接的 href 保持真实跳转地址，不影响语义和 SEO。

2. 绑定事件委托并匹配当前路径

监听 .sidebar 的 click，阻止默认跳转（可选），然后提取目标链接的 data-path，与 location.pathname 比较：

document.querySelector('.sidebar').addEventListener('click', function (e) {
  const link = e.target.closest('a[data-path]');
  if (!link) return;

  e.preventDefault(); // 可选：若用前端路由（如 history.pushState），则阻止默认跳转

  const targetPath = link.dataset.path;
  const currentPath = location.pathname;

  // 精确匹配：targetPath === currentPath
  // 或前缀匹配：currentPath.startsWith(targetPath)
  const isActive = currentPath === targetPath || currentPath.startsWith(targetPath + '/');

  // 移除所有高亮
  this.querySelectorAll('a.active').forEach(el => el.classList.remove('active'));

  // 给当前项加 active
  if (isActive) {
    link.classList.add('active');
  }
});

关键点：
– 用 e.target.closest('a[data-path]') 安全获取被点击的菜单链接，兼容子元素（如图标、文字包裹）；
– startsWith(targetPath + '/') 避免 /user 错误匹配 /users；
– 匹配逻辑可按需调整（如忽略末尾 /、支持正则等）。

3. 页面加载时自动高亮（首次进入）

事件委托只响应点击，页面首次打开时需手动触发一次高亮：

OpenJDK 24

下载

function highlightActiveMenu() {
  const sidebar = document.querySelector('.sidebar');
  const currentPath = location.pathname;
  
  sidebar.querySelectorAll('a[data-path]').forEach(link => {
    const targetPath = link.dataset.path;
    const isActive = currentPath === targetPath || currentPath.startsWith(targetPath + '/');
    
    link.classList.toggle('active', isActive);
  });
}

// 页面加载后执行
highlightActiveMenu();

建议放在 DOMContentLoaded 或脚本末尾执行。