本文介绍一种基于 url hash 的单页导航方案：点击导航项时更新地址栏 hash 并高亮对应内容区块，页面加载时自动匹配 hash 显示相应 div，同时移除其他区块的 active 状态。
在构建轻量级单页应用（如学术项目网站、作品集或文档站点）时，无需框架即可实现平滑的导航与内容切换。核心思路是利用 URL 中的 #hash 值作为状态标识，将其与 DOM 元素 ID 关联，并通过 CSS 类（如 .active）控制显隐——这比直接操作 style.display 更灵活、更易维护。
✅ 正确实现的关键点
解耦“点击响应”与“初始加载”逻辑
导航点击需调用 e.preventDefault() 阻止默认跳转，手动更新 active 状态；而页面首次加载时，应监听 window.load 或更推荐的 DOMContentLoaded 事件，读取当前 location.hash 并初始化视图。统一 hash 处理方式
使用 replace("#", "") 安全提取 ID，避免因开头多一个 # 导致 getElementById 失败（ID 本身不含 #）。精准状态管理
每次只给目标 div 添加 active，其余全部移除——避免多重 active 或遗漏隐藏。
以下是完整、健壮的实现代码：
const navLinks = document.querySelectorAll(".nav-links a");
const divs = document.querySelectorAll("div.articleDiv");
// 处理导航点击：更新 hash + 切换 active 状态
navLinks.forEach(link => {
link.addEventListener("click", e => {
e.preventDefault();
const targetId = link.getAttribute("href").replace("#", "");
// 移除所有 div 的 active 类
divs.forEach(div => div.classList.remove("active"));
// 为匹配 ID 的 div 添加 active 类
const targetDiv = document.getElementById(targetId);
if (targetDiv) targetDiv.classList.add("active");
// 可选：手动更新 URL hash（click 已触发默认行为，此行非必须）
// history.pushState(null, "", `#${targetId}`);
});
});
// 页面加载完成时，根据当前 hash 初始化显示
document.addEventListener("DOMContentLoaded", () => {
const hashId = window.location.hash.replace("#", "");
// 移除所有 active 状态
divs.forEach(div => div.classList.remove("active"));
// 激活对应区块（含默认 Home）
if (hashId && document.getElementById(hashId)) {
document.getElementById(hashId).classList.add("active");
} else {
document.getElementById("Home")?.classList.add("active");
}
});? 注意事项与增强建议
-
CSS 必备样式：确保 .active 类已正确定义显示效果，例如：
.articleDiv { display: none; } .articleDiv.active { display: block; }若使用 Flex/Grid 布局，也可配合 visibility: hidden 或 opacity: 0 实现过渡动画。
可访问性优化：为 .active 区块添加 aria-hidden="false"，其余设为 "true"，并确保焦点管理（如 targetDiv.focus()）。
-
浏览器前进/后退支持：当前方案不监听 hashchange 事件。如需支持历史导航，补充：
window.addEventListener("hashchange", () => { const newId = window.location.hash.replace("#", ""); divs.forEach(div => div.classList.remove("active")); document.getElementById(newId)?.classList.add("active") || document.getElementById("Home")?.classList.add("active"); }); 健壮性检查：使用 ?. 可选链操作符防止 getElementById 返回 null 时报错。
