如何通过 URL Hash 实现导航菜单与内容区块的联动显示_技术教程

本文介绍一种基于 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");
});