单HTML文件实现锚点控制多板块显示及导航栏复用方案求助

我正在做一个编码项目，想在单个HTML文件里实现多“页面”效果——比如访问awsomesauce.com/page.html#videos时只显示视频板块，同时保留统一的导航栏。但我试的JavaScript方案没成功，求可行思路。

我目前尝试的代码：

// 获取当前URL（示例中是awsomesauce.com/page#videos）
let url = window.location.href;
// 获取当前URL的长度
let urlLength = window.location.href.length;
// 提取从索引21开始的URL部分
let  = url.substr(21, urlLength);

可行实现思路 #

1. 页面结构布局

• 给每个“页面”板块设置唯一ID，并统一添加类名，比如：

  <!-- 统一导航栏 -->
  <nav>
    <a href="#home">首页</a>
    <a href="#videos">视频</a>
    <a href="#articles">文章</a>
  </nav>
  
  <!-- 各个板块 -->
  <div id="home" class="page-section">首页内容</div>
  <div id="videos" class="page-section">视频板块内容</div>
  <div id="articles" class="page-section">文章板块内容</div>
  

• 用CSS默认隐藏所有板块：

  .page-section {
    display: none;
  }
  

2. 修复并优化JavaScript逻辑

你的原有代码硬编码索引提取内容，完全适配不了不同长度的URL。正确做法是直接操作URL的哈希值（锚点部分）：

// 定义显示指定板块的函数
function showSection(sectionId) {
  // 隐藏所有板块
  document.querySelectorAll('.page-section').forEach(section => {
    section.style.display = 'none';
  });
  // 显示目标板块
  const targetSection = document.getElementById(sectionId);
  if (targetSection) {
    targetSection.style.display = 'block';
  }
}

// 页面加载时初始化显示对应板块
window.addEventListener('load', function() {
  // 获取当前锚点（去掉开头的#），默认显示首页
  const initialSection = window.location.hash.slice(1) || 'home';
  showSection(initialSection);
});

// 监听锚点变化（点击导航、浏览器前进后退时触发）
window.addEventListener('hashchange', function() {
  const currentSection = window.location.hash.slice(1) || 'home';
  showSection(currentSection);
});

3. 额外优化建议

• 用CSS类控制显示隐藏更灵活：定义.active-section { display: block; }，切换时给目标板块加类，其他板块移除类。
• 给导航项添加激活状态：比如当前显示#videos时，给对应的<a>标签加class="active"，用CSS高亮。

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