本文介绍一种纯前端方案：利用 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="/ai/1751" title="Descript"><img
src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d01b6eea6312.png" alt="Descript" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1751" title="Descript">Descript</a>
<p>一个多功能的音频和视频编辑引擎</p>
</div>
<a href="/ai/1751" title="Descript" 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() 函数，便于维护。
该方案兼容所有现代浏览器，零依赖、轻量高效，是静态网站实现内容筛选的理想选择。
