本文介绍一种纯前端方案：利用 url 的 fragment（哈希值）配合 javascript，在跳转到目标页时自动显示对应 id 的区块，隐藏其余内容，无需后端参与。
在多页网站中，常需实现“从首页分类链接跳转至详情页，并仅展示对应类别内容”的交互效果。例如，点击「Web Design」链接后进入 page2.html，页面只显示 id="webdesign-filter" 的区块，其余内容默认隐藏。这一效果可通过 URL 锚点（hash） + CSS 隐藏 + DOM 动态显示 三步轻松实现。
✅ 实现步骤
-
统一初始状态：所有区块默认隐藏
为每个内容区块添加公共类名（如 .hidden），并通过 CSS 设置 display: none：
.hidden {
display: none;
}-
结构化语义化 HTML
确保每个内容区块拥有唯一且与跳转链接完全匹配的 id（注意大小写与连字符一致性）：
-
跳转链接使用标准锚点语法
首页链接需指向目标页 + #id，确保浏览器能正确解析 hash 值：
⚠️ 注意：链接中不要额外添加斜杠（如 page2.html/#webdesign-filter 是错误的），应为 page2.html#webdesign-filter，否则 hash 可能无法被正确读取。
-
页面加载时自动激活目标区块
使用 DOMContentLoaded 监听器读取当前 URL 的 hash，查找对应元素并设为 display: block：
? 进阶建议
- 若需支持返回首页时显示全部内容，可在 page2.html 添加一个「All」链接：Show All，并在脚本中增加对空 hash 的处理（如移除 .hidden 类或重置所有区块）。
- 推荐将 .hidden 替换为更语义化的类名（如 .section-hidden），避免与第三方库冲突。
- 在单页应用（SPA）场景中，可进一步封装为可复用的 showSectionByHash() 函数，便于维护。
该方案兼容所有现代浏览器，零依赖、轻量高效，是静态网站实现内容筛选的理想选择。
