纯CSS实现点击锚点显示内容并自动隐藏其他元素

通过合理调整 HTML 结构，并巧妙结合 :target 伪类与兄弟选择器的运用，无需任何 JavaScript 即可实现点击锚点后显示目标区块，同时自动隐藏其余所有内容（包括触发点击的那个链接）的效果。

通常提到前端交互，大家的第一反应几乎都是 JavaScript。但有些需求，其实只需要几行简洁的 CSS 就能优雅解决。例如本文要探讨的常见场景：点击一个链接，显示对应的内容区块，同时自动隐藏其他所有内容——包括被点击的链接本身。

要实现这个效果，关键在于结构上的一个巧妙调整：把作为锚点的 标签直接嵌套进目标

内部。然后利用 :target 伪类，配合相邻或后续兄弟选择器（如 ~ 和 >），来精确控制显示与隐藏。

  a
  
this is a id



  b
  
this is b id



  c
  
this is c id

✅ 对应 CSS 样式：纯 CSS 实现显示与隐藏逻辑

.page {
  display: inline-block; /* 保持块级行为，避免换行干扰 */
}

.content {
  display: none;
}

/* 当前目标页显示其 content，隐藏自身 anchor */
.page:target > .content {
  display: block;
}

.page:target > a {
  display: none;
}

/* 隐藏所有非目标 .page 元素（及其子元素） */
.page:target ~ :not(.page:target) {
  display: none;
}

⚠️ 注意事项：

• :target ~ :not(.page:target) 这个选择器依赖兄弟关系，所以所有的 .page 必须处于同一层级且顺序排列；
• 该方案完全不需要 JavaScript，兼容 IE9 及以上的现代浏览器，性能更优，语义也更清晰；
• 如果还需要在返回时恢复锚点链接的可见性，可额外添加一条回退样式，但在这种“单页切换”场景下，简洁高效才是关键。

? 扩展建议（可选增强）

• 通过 CSS 过渡动画增强交互体验：

.content {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.page:target > .content {
  opacity: 1;
  transform: translateY(0);
}

• 如果还需要支持键盘导航（如按 Enter 触发）， 标签的语义和可访问性天然就能满足，完全无需额外引入 JavaScript。