如何基于URL哈希值为导航菜单添加active类

没问题，这个需求在单页导航场景里太常见了，我给你整理一套靠谱的实现方案：

首先得抓住两个核心场景：一是页面刚加载时如果URL已经带哈希值，要直接给对应菜单加上active类；二是哈希值变化时实时更新菜单的高亮状态。咱们把逻辑封装成一个复用函数，不管初始化还是哈希变化都能调用，代码更整洁。

完整代码示例 #

// 封装处理active类的核心函数
function updateActiveAnchor() {
  // 先移除所有菜单li的active类，避免多个菜单同时高亮
  $('.anchorX, .anchorY, .anchorZ').removeClass('active');
  
  // 获取当前URL的哈希值，去掉开头的#号
  const currentHash = window.location.hash.slice(1);
  
  // 如果哈希值存在，给对应class的li添加active类
  if (currentHash) {
    $(`.${currentHash}`).addClass('active');
  }
  // 可选：如果哈希为空，可设置默认选中的菜单，比如第一个
  // else {
  //   $('.anchorX').addClass('active');
  // }
}

// 页面加载完成后先执行一次初始化
$(document).ready(function() {
  updateActiveAnchor();
  
  // 监听哈希变化事件，实时更新菜单状态
  $(window).on('hashchange', function() {
    updateActiveAnchor();
  });
});

代码细节说明 #

• 把逻辑抽成updateActiveAnchor函数，既方便初始化调用，也能在哈希变化时复用，避免重复代码。
• 每次更新前先移除所有li的active类，这一步很关键——不然切换哈希时旧的高亮状态不会自动消失。
• window.location.hash.slice(1)是把哈希值里的#去掉，比如#anchorX会变成anchorX，刚好匹配你li的class名。
• 页面初始化时调用函数，解决了直接从带哈希的URL（比如书签）进入页面时，菜单不会自动高亮的问题。

额外优化提示 #

如果你的菜单li的class都是以anchor开头的（比如anchorX、anchorY），可以用更通用的选择器，不用逐个列出来，适合菜单数量多的情况：

// 更通用的选择器，匹配所有class以anchor开头的li
$('li[class^="anchor"]').removeClass('active');

这样后续新增锚点菜单时，代码完全不用修改～

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