本文详解如何利用 url hash 值实现单页网站中导航菜单与对应内容区块的自动联动：点击导航项更新 hash 并高亮目标区块，页面加载时根据当前 hash 自动激活对应 div，确保前后端无刷新状态同步。
在构建轻量级单页应用（SPA）或学术型静态网站时，常需避免整页刷新，同时保持 URL 可书签化、可分享、支持浏览器前进/后退。核心思路是：用 #hash 标识当前激活内容，通过 CSS 类（如 .active）控制显隐，而非直接操作 style.display——这既符合关注点分离原则，也便于样式统一维护。
✅ 正确实现逻辑分两步
导航点击处理（客户端交互）
为每个导航链接绑定 click 事件，调用 e.preventDefault() 阻止默认跳转行为，手动提取 href 中的 ID（去除 #），遍历所有内容区块（如 .articleDiv），仅对匹配 ID 的 div 添加 .active 类，其余移除。页面加载初始化（URL 状态同步）
在 window.addEventListener('load', ...) 中读取 window.location.hash，解析出目标 ID。若 hash 为空，则默认激活 #Home；否则激活对应 ID 的 div。⚠️ 注意：必须在 DOM 加载完成（或至少目标元素已存在）后执行，否则 getElementById 可能返回 null。
? 完整可运行代码示例
<!-- HTML 结构示意 --> <nav class="nav-links"><a href="#Home">首页</a> <a href="#About">关于</a> <a href="#Contact">联系</a> </nav><div id="Home" class="articleDiv">欢迎来到首页</div> <div id="About" class="articleDiv">关于我们</div> <div id="Contact" class="articleDiv">联系方式</div>
/* CSS 控制显隐（推荐方式） */
.articleDiv {
display: none;
}
.articleDiv.active {
display: block;
}
// JavaScript 主逻辑
const navLinks = document.querySelectorAll(".nav-links a");
const divs = document.querySelectorAll("div.articleDiv");
// 步骤1：绑定导航点击事件
navLinks.forEach(link => {
link.addEventListener("click", e => {
e.preventDefault();
const targetId = link.getAttribute("href").replace("#", "");
// 清空所有 active 状态
divs.forEach(div => div.classList.remove("active"));
// 激活目标 div
const targetDiv = document.getElementById(targetId);
if (targetDiv) targetDiv.classList.add("active");
// 同步更新 URL hash（可选，但建议保留以支持前进/后退）
history.pushState(null, "", `#${targetId}`);
});
});
// 步骤2：页面加载时根据当前 hash 初始化状态
window.addEventListener("load", () => {
const hash = window.location.hash.replace("#", "");
// 清空所有 active
divs.forEach(div => div.classList.remove("active"));
// 激活对应 div 或默认 Home
const target = hash ? document.getElementById(hash) : document.getElementById("Home");
if (target) target.classList.add("active");
});
⚠️ 关键注意事项
- 不要混用 display 与 classList：原问题中同时尝试设置 style.display 和操作 classList，易导致样式冲突。统一使用 CSS 类控制显隐更可靠。
- querySelectorAll 选择器需精确：确保 ".nav-links a" 和 "div.articleDiv" 能准确命中目标元素，避免因 HTML 结构变动导致脚本失效。
- Hash 解析容错处理：window.location.hash 在无 hash 时返回空字符串 ""，非 null 或 undefined，判断时建议用 !hash 或 hash === ""。
- 增强用户体验（进阶）：可配合 history.pushState 实现无刷新 URL 更新，并监听 popstate 事件响应浏览器前进/后退，使单页体验更完整。
该方案简洁、兼容性好（支持所有现代浏览器及 IE10+），无需框架依赖，特别适合 thesis 项目等轻量级静态站点开发。
