本文介绍一种轻量、无需后端的前端方案：利用 url 哈希（`#id`）在跳转到目标页时，自动显示对应 id 的区块，同时隐藏其他内容。
要实现“从页面1点击链接，跳转至页面2并仅显示对应模块”的效果，核心在于结合 HTML 锚点定位、CSS 隐藏控制与 JavaScript 动态显隐逻辑。整个流程无需服务器参与，完全由浏览器端完成。
✅ 实现步骤
-
统一结构与初始隐藏
在 page2.html 中，为所有待切换的内容块添加统一类名（如 .hidden），并通过 CSS 默认隐藏：
<style>
.hidden { display: none; }
</style>
<div class="content-sections">
<div class="hidden" id="webdesign-filter">
<h4>Web Design</h4>
<p>Lorem ipsum dolor sit amet.</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12185" title="SEO-Awesome"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20cf0281539.jpg" alt="SEO-Awesome" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12185" title="SEO-Awesome">SEO-Awesome</a>
<p>利用Google官方API实现全链路出海SEO自动化，批量生成PSEO页面，自动发布与GA4数据复盘。</p>
</div>
<a href="/xiazai/skill12185" title="SEO-Awesome" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</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>
</div>-
链接携带锚点
页面1的导航链接需指向 page2.html#xxx-filter 形式的完整 URL（注意：# 前无斜杠）：
<ul class="portfolio-filters list-inline"> <li><a href="page2.html#webdesign-filter">Web Design</a></li> <li><a href="page2.html#responsive-filter">Responsive</a></li> <li><a href="page2.html#wordpress-filter">Wordpress</a></li> </ul>
⚠️ 注意：href="page2.html/#webdesign-filter" 中多余的 / 会导致浏览器无法正确定位，应修正为 page2.html#webdesign-filter。
-
JavaScript 自动激活目标区块
在 page2.html 底部（或 DOMContentLoaded 事件中）执行以下脚本：
<script>
document.addEventListener("DOMContentLoaded", () => {
const hash = document.location.hash;
if (hash && hash !== "#") {
const target = document.querySelector(hash);
if (target) {
// 清除其他同级 .hidden 元素的 display 样式（可选：增强健壮性）
document.querySelectorAll('.hidden').forEach(el => {
el.style.display = 'none';
});
target.style.display = 'block';
} else {
// 若锚点不存在，可默认显示第一个或提示错误
document.querySelector('.hidden')?.style.display = 'block';
}
} else {
// 无哈希时，默认显示首个内容块
document.querySelector('.hidden')?.style.display = 'block';
}
});
</script>? 补充说明与优化建议
- 语义化增强：可将 .hidden 替换为更明确的类名如 .section--hidden，配合 BEM 命名提升可维护性。
- 过渡动画：如需淡入效果，可改用 opacity + transition，并配合 visibility: hidden/visible 控制交互响应。
- SEO 与可访问性：所有内容仍存在于 HTML 源码中，搜索引擎可正常索引；屏幕阅读器也能读取隐藏但未移除的元素（若需完全排除，应使用 aria-hidden="true" 或动态 remove()，但会牺牲返回刷新后的状态保持）。
- 兼容性：该方案兼容所有现代浏览器及 IE11+，无需额外 polyfill。
此方法简洁高效，适用于作品集、分类展示、单页式产品页等场景，是静态网站中实现“伪路由”内容筛选的理想实践。
