URLHash实现单页导航切换技巧

一分耕耘，一分收获！既然都打开这篇《URL Hash 实现单页导航与内容切换方法》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

本文介绍如何利用 URL 的 hash 值实现单页网站中导航栏点击跳转与对应内容区块（div）的动态显示/隐藏，同时确保页面首次加载时也能根据当前 hash 正确激活对应模块。

在构建轻量级单页应用（SPA）或学术项目网站时，常需避免整页刷新，仅通过 URL hash（如 #About、#Contact）控制内容展示。核心逻辑分为两部分：用户交互响应（点击导航项更新 hash 并切换内容）和初始化渲染（页面加载时依据当前 hash 激活对应区块）。以下是完整、健壮的实现方案：

✅ 正确结构与关键要点

• 避免重复逻辑：原代码中 pathName 在事件监听器外提前计算，导致点击时仍使用旧 hash 值；应将 hash 解析逻辑移至事件处理或初始化阶段。
• 统一激活机制：所有内容切换均通过 active 类控制（推荐 CSS 控制 display: block / none），而非直接操作 style.display，便于维护与动画扩展。
• 阻止默认行为：导航链接点击必须调用 e.preventDefault()，否则浏览器会立即跳转并触发页面重载（或锚点滚动），干扰 JS 控制流。
• 分离关注点：点击事件只负责更新 UI 和 hash；初始化逻辑（load 事件）只负责首次渲染，互不干扰。

? 完整可运行代码

<!-- 示例 HTML 结构 -->
<nav>
  <a href="#Home" class="nav-links">Home</a>
  <a href="#About" class="nav-links">About</a>
  <a href="#Contact" class="nav-links">Contact</a>
</nav>

<div id="Home" class="articleDiv">Home content</div>
<div id="About" class="articleDiv">About content</div>
<div id="Contact" class="articleDiv">Contact content</div>

/* 推荐 CSS 控制显隐 */
.articleDiv {
  display: none;
}
.articleDiv.active {
  display: block;
}

const navLinks = document.querySelectorAll(".nav-links");
const divs = document.querySelectorAll(".articleDiv");

// 1️⃣ 处理导航点击：更新 hash 并切换内容
navLinks.forEach(link => {
  link.addEventListener("click", e => {
    e.preventDefault();
    const targetId = link.getAttribute("href").replace("#", "");

    // 移除所有 active 类
    divs.forEach(div => div.classList.remove("active"));
    // 为目标 div 添加 active 类
    const targetDiv = document.getElementById(targetId);
    if (targetDiv) {
      targetDiv.classList.add("active");
      // 可选：同步更新 URL hash（即使 href 已含 #，显式设置更可靠）
      history.pushState(null, "", `#${targetId}`);
    }
  });
});

// 2️⃣ 页面加载时初始化：根据当前 hash 激活对应内容
window.addEventListener("load", () => {
  const hash = window.location.hash.replace("#", "");
  // 移除所有 active 类
  divs.forEach(div => div.classList.remove("active"));
  // 激活匹配项或默认 Home
  const targetDiv = hash ? document.getElementById(hash) : document.getElementById("Home");
  if (targetDiv) {
    targetDiv.classList.add("active");
  }
});

⚠️ 注意事项与增强建议

• Hash 变更监听（进阶）：若需支持浏览器前进/后退按钮，可监听 hashchange 事件替代 load，实现全场景响应：

  window.addEventListener("hashchange", () => {
    const hash = window.location.hash.replace("#", "");
    divs.forEach(div => div.classList.remove("active"));
    (document.getElementById(hash) || document.getElementById("Home"))?.classList.add("active");
  });

• ID 安全性检查：document.getElementById() 返回 null 时调用 .classList 会报错，建议增加存在性判断（如上例中的可选链 ?.）。
• 无障碍优化：为 .active 区块添加 aria-hidden="false"，其余设为 "true"，提升屏幕阅读器体验。
• 性能考量：对于大量内容区块，可考虑用 Map 缓存 ID → Element 映射，避免重复 DOM 查询。

该方案结构清晰、职责分明，兼顾首次加载、用户点击及历史导航，是构建 hash 驱动单页界面的可靠基础。

到这里，我们也就讲完了《URLHash实现单页导航切换技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！