如何通过页面跳转链接控制目标页显示特定内容

本文介绍一种轻量级前端方案：利用 url 锚点（hash）配合 javascript，在跳转到第二页时自动显示对应 id 的区块，同时隐藏其余内容，无需后端参与或框架依赖。

要实现从页面一（page1.html）点击不同分类链接后，跳转至页面二（page2.html）并仅显示对应内容区块（如仅显示 #webdesign-filter 对应的 <div>），核心思路是：利用 URL 中的 hash 值作为标识符，结合 DOM 操作动态控制显隐。

✅ 实现步骤

1. 统一初始状态：所有内容默认隐藏
   为所有待切换的区块添加统一 CSS 类（如 .hidden），并通过样式设为 display: none：

   <style>
   .hidden { display: none; }
   </style>

2. 结构化语义化标记
   确保每个内容区块拥有与链接 href 中 hash 值完全匹配的 id（注意大小写与连字符一致性）：

   <div class="hidden" id="webdesign-filter">
     <h4>Web Design</h4>
     <p>Lorem ipsum dolor sit amet.</p>
   </div>
   <div class="hidden" id="responsive-filter">
     <h4>Responsive</h4>
     <p>Lorem ipsum dolor sit amet.</p>
   </div>
   <div class="hidden" id="wordpress-filter">
     <h4>Wordpress</h4>
     <p>Lorem ipsum dolor sit amet.</p>
   </div>

3. 页面加载时解析 hash 并激活目标元素
   使用 DOMContentLoaded 事件监听器，在 page2.html 加载完成后读取当前 URL 的 hash（如 #webdesign-filter），查找对应元素并设为 display: block：

   <script>
   document.addEventListener("DOMContentLoaded", () => {
     const hash = document.location.hash;
     if (hash && document.querySelector(hash)) {
       // 移除所有 .hidden 类（或重置 display），再单独显示目标项
       document.querySelectorAll('.hidden').forEach(el => {
         el.style.display = 'none';
       });
       document.querySelector(hash).style.display = 'block';
     } else {
       // 若无有效 hash，默认显示第一个（可选）
       const firstItem = document.querySelector('.hidden');
       if (firstItem) firstItem.style.display = 'block';
     }
   });
   </script>

? 增强建议： 使用 classList 替代内联样式更利于维护（例如定义 .shown { display: block; }，再用 el.classList.remove('hidden').addClass('shown')）； 添加平滑滚动效果：document.querySelector(hash)?.scrollIntoView({ behavior: 'smooth' })； 兼容性方面，上述代码支持所有现代浏览器及 IE11+。

该方案简洁可靠，不依赖 jQuery 或任何第三方库，适用于静态网站、单页应用子页面或 CMS 自定义模板等场景。只要确保链接 href 与目标 id 严格一致，即可实现精准的内容路由。

Sora

Sora是OpenAI发布的一种文生视频AI大模型，可以根据文本指令创建现实和富有想象力的场景。

下载