jQuery 实现页面加载时根据 URL Hash 自动高亮对应团队成员

花韻仙語 2026-01-07 00:00:00 次阅读

本文介绍如何在页面初次加载（含 url 带 hash）和后续 hash 变更时，均能自动为指定元素添加 `.open` 类，实现锚点定位后的视觉反馈，解决仅监听 `hashchange` 事件导致的首次加载失效问题。

要让 jQuery 在页面首次加载时就响应 URL 中的 hash（例如直接访问 https://www.mypage/members#anchorX），仅依赖 hashchange 事件是不够的——因为该事件只在 hash 发生变化时触发，而页面初始加载时并无“变化”发生。

正确的做法是：将核心逻辑封装为独立函数，并在 DOM 就绪后立即执行一次，同时绑定到 hashchange 事件上。这样既覆盖了初始加载场景，也兼容后续手动跳转或浏览器前进/后退等动态 hash 更新。

以下是推荐的完整实现：

$(function() {
  // 核心处理函数：根据当前 hash 添加 .open 类
  function handleHash() {
    const hash = window.location.hash;
    if (hash && hash.length > 1) {
      // 使用原生 hash 字符串（如 '#anchorX'）直接作为 jQuery 选择器
      // ✅ 更安全、更高效，避免 ID 转义与拼接风险
      $(hash).next('div').addClass('open');
    }
  }

  // 页面加载完成时立即执行（处理初始 hash）
  handleHash();

  // 同时监听 hash 变更（处理后续跳转）
  $(window).on('hashchange', handleHash);
});

? 关键优化说明：

不使用 preventDefault()：hashchange 是纯监听事件，无默认行为可阻止，调用 e.preventDefault() 无效且多余；
直接使用 $(hash) 选择器：比 $('div[id^="' + hash.substr(1) + '"]') 更准确、简洁，且天然支持 ID 特殊字符（如点号、冒号）；
限定 .next('div')：避免误匹配非兄弟元素，提升健壮性；
$(function(){...}) 确保 DOM 就绪：保证 handleHash() 执行时目标元素已存在。

? 补充建议：

若需支持平滑滚动到锚点，可在 handleHash() 中添加 $('html, body').animate({ scrollTop: $(hash).offset().top }, 300);；
为避免重复添加 .open，可先移除再添加：$('.open').removeClass('open'); $(hash).next('div').addClass('open');；
现代项目中推荐迁移到原生 JavaScript（无需 jQuery），但本方案完全兼容现有 jQuery 环境。

通过这一设计，无论用户是直接访问带 hash 的链接，还是在页面内点击锚点跳转，目标内容区块都能即时获得 .open 样式（如红色文字、完全不透明），实现一致、可靠的用户体验。