当前位置：首页 > 文章列表 > 文章 > 前端 > URL哈希实现单页内容切换技巧

URL哈希实现单页内容切换技巧

2026-02-14 22:00:52 0浏览收藏

本文深入解析了如何利用URL哈希（#）机制实现轻量、可靠的单页内容切换，通过优化事件监听逻辑、抽离复用的激活函数、严格校验哈希有效性并统一管理active状态，完美解决了初始哈希误用、hashchange缺失监听、样式残留和状态不同步等常见问题；方案不仅支持导航点击、地址栏手动修改、浏览器前进/后退及书签直连，还兼顾可访问性与视觉体验，是静态站点或学术项目主页构建简洁高效单页导航的理想实践。

实现基于 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);

? 关键改进说明：