点击导航更新URL哈希并显示对应div的功能异常排查

你的核心问题是代码逻辑混乱，同时缺少哈希变化的监听机制，导致div的active状态更新不符合预期。具体问题点：

• 点击事件里同时混用targetDiv（点击的目标）和页面初始的pathName，逻辑冲突，比如点击新链接时，旧的pathName还会干扰状态判断。
• 只在页面初始化时处理了一次哈希对应div的显示，没有监听哈希变化（比如手动改URL哈希、刷新页面、浏览器前进后退），这些场景下div状态不会更新。
• 初始化和点击事件的显示逻辑重复，没有复用，容易出错。

优化后的代码 #

// 提取复用函数：根据当前哈希值更新内容div的active状态
function updateActiveDiv() {
  const currentHash = window.location.hash.replace("#", "");
  // 先移除所有div的active类
  divs.forEach(div => div.classList.remove("active"));
  
  // 确定要显示的目标div：哈希为空则显示Home，否则显示对应id的div
  const targetId = currentHash || "Home";
  const targetDiv = document.getElementById(targetId);
  if (targetDiv) {
    targetDiv.classList.add("active");
  }
}

// 导航点击事件：利用链接本身的哈希跳转，仅触发状态更新
navLinks.forEach(link => {
  link.addEventListener("click", () => {
    // 延迟触发确保哈希已完成更新
    setTimeout(updateActiveDiv, 0);
  });
});

// 监听哈希变化事件：覆盖手动改哈希、刷新、前进后退等场景
window.addEventListener("hashchange", updateActiveDiv);

// 页面初始化时执行一次，确保初始状态正确
updateActiveDiv();

代码说明 #

• 复用函数updateActiveDiv：统一处理所有场景下的div状态更新，先清空所有div的active类，再根据当前哈希（哈希为空则默认显示Home）给目标div添加active类，逻辑清晰无冲突。
• 导航点击事件：简化逻辑，因为<a href="#xxx">本身会自动修改URL哈希，只需在点击后触发状态更新即可（用setTimeout确保哈希已更新完成）。
• 哈希变化监听：覆盖所有哈希变更场景，保证div状态始终和URL哈希同步。
• 初始化执行：页面加载时直接调用函数，确保初始显示状态正确。

额外建议 #

• 确保导航链接的href属性值是#Home、#About这类和内容div的id完全对应的格式。
• 确认divs变量已正确获取所有需要控制显示的内容div元素（比如用document.querySelectorAll(".content-section")这类选择器）。

内容的提问来源于stack exchange，提问作者Lena