如何在菜单或子菜单的活跃页面高亮主菜单按钮？

1. 修正CSS类 #

你当前用的.dropbtn:active是点击瞬间的临时状态，无法实现页面切换后的持久高亮。替换成专属的.active类：

/* 持久高亮的菜单按钮样式 */
.dropbtn.active {
  background-color: blue;
}

2. 动态高亮的JavaScript代码 #

这段代码会在页面加载时自动匹配当前URL，找到对应的主菜单按钮并添加高亮类，完全适配多页面场景：

document.addEventListener('DOMContentLoaded', function() {
  // 获取当前页面的路径（比如 "/About"）
  const currentPath = window.location.pathname;
  
  // 遍历所有主菜单按钮
  document.querySelectorAll('.dropbtn').forEach(btn => {
    // 查找该按钮对应的所有子菜单链接
    const subLinks = btn.nextElementSibling.querySelectorAll('a');
    
    // 检查是否有子链接的路径与当前页面匹配
    const isCurrentMenu = Array.from(subLinks).some(link => {
      return link.getAttribute('href') === currentPath;
    });
    
    // 如果匹配，添加高亮类
    if (isCurrentMenu) {
      btn.classList.add('active');
    }
  });
});

3. 额外说明 #

• 无需硬编码菜单ID：代码会自动遍历所有.dropbtn元素，适配后续新增的主菜单。
• 适配带参数的路径：如果你的页面URL带查询参数（如/About?id=1），可以修改匹配逻辑为：

  return currentPath.startsWith(link.getAttribute('href'));
  

• 优化链接行为：你链接上的onclick="window.location.reload(true);"是多余的，跳转页面时无需强制重载，建议删除以提升体验。

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