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