实现基于 URL 哈希值的单页导航内容切换_技术教程

本文介绍如何通过监听 url 哈希（`#`）变化与导航点击事件，动态显示对应内容区块并维护 `active` 状态，确保页面加载和用户交互时内容展示一致、哈希同步、样式准确。

在构建单页应用式网站（如学术项目主页）时，常需用

导航栏控制多个内容区块的显隐，同时保持 URL 哈希（如 #About）与当前视图同步——这不仅提升用户体验，还支持浏览器前进/后退、书签直连等关键功能。

核心逻辑分为两部分：用户点击导航时更新哈希并激活对应区块，以及页面加载/哈希变化时初始化或响应状态。原代码的主要问题在于：

在点击事件中错误地混用了初始哈希 pathName（该值在页面加载时固定，未随点击实时更新）；
缺少对哈希变更的监听（如用户手动修改地址栏或使用浏览器历史导航）；
激活逻辑冗余且条件冲突（如同时判断 div.id === targetDiv 和 div.id === pathName，但 pathName 并未在点击后刷新）。

以下是优化后的完整实现：

const navLinks = document.querySelectorAll(".nav-links a");
const divs = document.querySelectorAll("div.articleDiv");

// 处理导航点击：阻止默认跳转、更新哈希、激活目标区块
navLinks.forEach(link => {
  link.addEventListener("click", e => {
    e.preventDefault();
    const targetId = link.getAttribute("href").replace("#", "");
    // 更新 URL 哈希（触发 hashchange）
    window.location.hash = targetId;
    // 激活目标 div，隐藏其余
    divs.forEach(div => {
      if (div.id === targetId) {
        div.classList.add("active");
      } else {
        div.classList.remove("active");
      }
    });
  });
});

// 页面加载时：根据初始哈希或默认值激活对应区块
function activateSection() {
  const hash = window.location.hash.replace("#", "");
  divs.forEach(div => div.classList.remove("active")); // 先清空所有 active
  if (hash && document.getElementById(hash)) {
    document.getElementById(hash).classList.add("active");
  } else {
    document.getElementById("Home").classList.add("active"); // 默认首页
  }
}

// 首次加载 + 哈希变化时均触发
window.addEventListener("load", activateSection);
window.addEventListener("hashchange", activateSection);