如何通过 URL 锚点控制页面内容的条件显示
本文介绍一种轻量、无需后端的前端方案：利用 url 哈希（`#id`）在跳转到目标页时，自动显示对应 id 的区块，同时隐藏其他内容。
要实现“从页面1点击链接，跳转至页面2并仅显示对应模块”的效果，核心在于结合 HTML 锚点定位、CSS 隐藏控制与 JavaScript 动态显隐逻辑。整个流程无需服务器参与，完全由浏览器端完成。
✅ 实现步骤
-
统一结构与初始隐藏
在 page2.html 中，为所有待切换的内容块添加统一类名（如 .hidden），并通过 CSS 默认隐藏：
Web Design
Lorem ipsum dolor sit amet.
Responsive
Lorem ipsum dolor sit amet.
Wordpress
Lorem ipsum dolor sit amet.
-
链接携带锚点
页面1的导航链接需指向 page2.html#xxx-filter 形式的完整 URL（注意：# 前无斜杠）：
- Web Design
- Responsive
- Wordpress
⚠️ 注意：href="page2.html/#webdesign-filter" 中多余的 / 会导致浏览器无法正确定位，应修正为 page2.html#webdesign-filter。
-
JavaScript 自动激活目标区块
在 page2.html 底部（或 DOMContentLoaded 事件中）执行以下脚本：
? 补充说明与优化建议
- 语义化增强：可将 .hidden 替换为更明确的类名如 .section--hidden，配合 BEM 命名提升可维护性。
- 过渡动画：如需淡入效果，可改用 opacity + transition，并配合 visibility: hidden/visible 控制交互响应。
- SEO 与可访问性：所有内容仍存在于 HTML 源码中，搜索引擎可正常索引；屏幕阅读器也能读取隐藏但未移除的元素（若需完全排除，应使用 aria-hidden="true" 或动态 remove()，但会牺牲返回刷新后的状态保持）。
- 兼容性：该方案兼容所有现代浏览器及 IE11+，无需额外 polyfill。
此方法简洁高效，适用于作品集、分类展示、单页式产品页等场景，是静态网站中实现“伪路由”内容筛选的理想实践。
