本文介绍一种轻量级前端方案：利用 url 锚点（hash）配合 javascript，在跳转到第二页时自动显示对应 id 的区块，同时隐藏其余内容，无需后端参与或框架依赖。
要实现从页面一（page1.html）点击不同分类链接后，跳转至页面二（page2.html）并仅显示对应内容区块（如仅显示 #webdesign-filter 对应的
✅ 实现步骤
-
统一初始状态：所有内容默认隐藏
为所有待切换的区块添加统一 CSS 类（如 .hidden），并通过样式设为 display: none： -
结构化语义化标记
确保每个内容区块拥有与链接 href 中 hash 值完全匹配的 id（注意大小写与连字符一致性）：Responsive
Lorem ipsum dolor sit amet.
WordPress
Lorem ipsum dolor sit amet.
-
页面加载时解析 hash 并激活目标元素
使用 DOMContentLoaded 事件监听器，在 page2.html 加载完成后读取当前 URL 的 hash（如 #webdesign-filter），查找对应元素并设为 display: block：
? 增强建议： 使用 classList 替代内联样式更利于维护（例如定义 .shown { display: block; }，再用 el.classList.remove(‘hidden’).addClass(‘shown’)）； 添加平滑滚动效果：document.querySelector(hash)?.scrollIntoView({ behavior: ‘smooth’ })； 兼容性方面，上述代码支持所有现代浏览器及 IE11+。
该方案简洁可靠，不依赖 jQuery 或任何第三方库，适用于静态网站、单页应用子页面或 CMS 自定义模板等场景。只要确保链接 href 与目标 id 严格一致，即可实现精准的内容路由。