17370845950

本文介绍一种纯前端方案：利用 url 的 fragment（哈希值）配合 javascript，在跳转到目标页时自动显示对应 id 的区块，隐藏其余内容，无需后端参与。

在多页网站中，常需实现“从首页分类链接跳转至详情页，并仅展示对应类别内容”的交互效果。例如，点击「Web Design」链接后进入 page2.html，页面只显示 id="webdesign-filter" 的区块，其余内容默认隐藏。这一效果可通过 URL 锚点（hash） + CSS 隐藏 + DOM 动态显示 三步轻松实现。

✅ 实现步骤

1. 统一初始状态：所有区块默认隐藏
   为每个内容区块添加公共类名（如 .hidden），并通过 CSS 设置 display: none：

.hidden {
  display: none;
}

2. 结构化语义化 HTML
   确保每个内容区块拥有唯一且与跳转链接完全匹配的 id（注意大小写与连字符一致性）：

  
    
Web Design
    
Custom UI/UX design solutions for modern businesses.
  
  
    
Responsive
    
Mobile-first layouts that adapt flawlessly across all devices.
  
  
    
Wordpress
    
Custom themes, plugins, and performance-optimized sites.
  

3. 跳转链接使用标准锚点语法
   首页链接需指向目标页 + #id，确保浏览器能正确解析 hash 值：

  
Web Design
  
Responsive
  
Wordpress

⚠️ 注意：链接中不要额外添加斜杠（如 page2.html/#webdesign-filter 是错误的），应为 page2.html#webdesign-filter，否则 hash 可能无法被正确读取。

4. 页面加载时自动激活目标区块
   使用 DOMContentLoaded 监听器读取当前 URL 的 hash，查找对应元素并设为 display: block：

? 进阶建议

• 若需支持返回首页时显示全部内容，可在 page2.html 添加一个「All」链接：Show All，并在脚本中增加对空 hash 的处理（如移除 .hidden 类或重置所有区块）。
• 推荐将 .hidden 替换为更语义化的类名（如 .section-hidden），避免与第三方库冲突。
• 在单页应用（SPA）场景中，可进一步封装为可复用的 showSectionByHash() 函数，便于维护。

该方案兼容所有现代浏览器，零依赖、轻量高效，是静态网站实现内容筛选的理想选择。