本文介绍一种纯前端方案：利用 url 的 fragment（哈希值）配合 javascript，在跳转到目标页时自动显示对应 id 的区块，隐藏其余内容，无需后端参与。
在多页网站中，常需实现“从首页分类链接跳转至详情页，并仅展示对应类别内容”的交互效果。例如，点击「Web Design」链接后进入 page2.html，页面只显示 id="webdesign-filter" 的区块，其余内容默认隐藏。这一效果可通过 URL 锚点（hash） + CSS 隐藏 + DOM 动态显示 三步轻松实现。
✅ 实现步骤
-
统一初始状态：所有区块默认隐藏
为每个内容区块添加公共类名（如 .hidden），并通过 CSS 设置 display: none：
.hidden {
display: none;
}-
结构化语义化 HTML
确保每个内容区块拥有唯一且与跳转链接完全匹配的 id（注意大小写与连字符一致性）：
<div class="portfolio-content">
<div class="hidden" id="webdesign-filter">
<h4>Web Design</h4>
<p>Custom UI/UX design solutions for modern businesses.</p>
</div>
<div class="hidden" id="responsive-filter">
<h4>Responsive</h4>
<p>Mobile-first layouts that adapt flawlessly across all devices.</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11815" title="CDP浏览器大师"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="CDP浏览器大师" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11815" title="CDP浏览器大师">CDP浏览器大师</a>
<p>CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。</p>
</div>
<a href="/xiazai/skill11815" title="CDP浏览器大师" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
<div class="hidden" id="wordpress-filter">
<h4>Wordpress</h4>
<p>Custom themes, plugins, and performance-optimized sites.</p>
</div>
</div>-
跳转链接使用标准锚点语法
首页链接需指向目标页 + #id，确保浏览器能正确解析 hash 值：
<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>
⚠️ 注意：链接中不要额外添加斜杠（如 page2.html/#webdesign-filter 是错误的），应为 page2.html#webdesign-filter，否则 hash 可能无法被正确读取。
-
页面加载时自动激活目标区块
使用 DOMContentLoaded 监听器读取当前 URL 的 hash，查找对应元素并设为 display: block：
<script>
document.addEventListener("DOMContentLoaded", () => {
const hash = window.location.hash;
if (hash) {
const targetElement = document.querySelector(hash);
if (targetElement) {
targetElement.style.display = "block";
// 可选：滚动至该区块顶部，提升用户体验
targetElement.scrollIntoView({ behavior: 'smooth' });
}
}
});
</script>? 进阶建议
- 若需支持返回首页时显示全部内容，可在 page2.html 添加一个「All」链接：Show All，并在脚本中增加对空 hash 的处理（如移除 .hidden 类或重置所有区块）。
- 推荐将 .hidden 替换为更语义化的类名（如 .section-hidden），避免与第三方库冲突。
- 在单页应用（SPA）场景中，可进一步封装为可复用的 showSectionByHash() 函数，便于维护。
该方案兼容所有现代浏览器，零依赖、轻量高效，是静态网站实现内容筛选的理想选择。
