实现基于 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 事件）只负责首次渲染，互不干扰。

? 完整可运行代码

  
Home content
 
About content
 
Contact content

/* 推荐 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 驱动单页界面的可靠基础。