本文介绍如何利用 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 驱动单页界面的可靠基础。
