纯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。

这套方案绕过了 JavaScript 操作 DOM 的繁琐，兼顾了可维护性、可访问性与性能，是实现纯 CSS 锚点式单页内容切换的一种非常理想的思路。