访问带id锚点的网页时如何隐藏其余内容仅展示目标区块

实现方案 #

你当前的代码仅在点击链接时触发显示切换逻辑，没有在页面加载时主动读取URL锚点做对应处理，因此刷新页面会回到初始状态。你可以按照以下方式修改代码，即可实现刷新保持锚点对应显示状态的效果：

1. CSS修改（适配多区块通用逻辑） #

.section {
  display: none;
}
.section.active {
  display: block;
}

2. HTML修改（统一区块标识类） #

<div id="first" class="section active"> original content </div>
<div id="second" class="section"> different content here </div>
<a href="#second" onclick="changeDisplay('#second')">跳转到第二个区块</a>
<!-- 后续新增区块只需按相同格式添加即可 -->

3. JS修改（新增锚点检测与通用切换逻辑） #

// 通用区块切换函数
function changeDisplay(targetHash) {
  // 隐藏所有区块
  document.querySelectorAll('.section').forEach(item => {
    item.classList.remove('active');
  });
  // 显示目标区块
  const target = document.querySelector(targetHash);
  if (target) target.classList.add('active');
}

// 页面加载时检测锚点，切换到对应区块
window.addEventListener('load', () => {
  const hash = window.location.hash;
  hash ? changeDisplay(hash) : changeDisplay('#first');
});

// 可选：监听锚点变化，适配浏览器前进后退操作
window.addEventListener('hashchange', () => {
  const hash = window.location.hash;
  hash ? changeDisplay(hash) : changeDisplay('#first');
});

逻辑说明 #

• 所有区块共用同一套显示/隐藏规则，后续新增区块无需修改JS逻辑，仅需添加对应HTML结构和跳转链接即可。
• 页面加载时会自动读取当前URL的锚点值，存在对应锚点则直接显示匹配的区块，刷新页面不会回到初始状态。
• 新增的hashchange监听可以适配浏览器前进、后退操作，切换锚点时自动更新显示内容，不需要额外点击跳转链接。

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