如何用纯 CSS 实现点击锚点显示对应内容并自动隐藏其他元素及触发链接-js教程-PHP中文网

如何用纯 CSS 实现点击锚点显示对应内容并自动隐藏其他元素及触发链接

通过调整 HTML 结构与巧妙运用 :target 伪类配合兄弟选择器，可在不依赖 JavaScript 的前提下，实现点击锚点显示目标区块、隐藏其余所有内容（包括触发用的标签）的效果。

通过调整 html 结构与巧妙运用 `:target` 伪类配合兄弟选择器，可在不依赖 javascript 的前提下，实现点击锚点显示目标区块、隐藏其余所有内容（包括触发用的 `` 标签）的效果。

要达成“点击链接显示对应内容，同时隐藏自身及其他所有非目标元素”的效果，关键在于改变 DOM 结构逻辑——将锚点放入目标

内部，并利用 CSS 的 :target 伪类与相邻/后续兄弟选择器（如 ~ 和 >）进行精准控制。

✅ 推荐结构：语义化 + 可控性更强

<div id="a" class="page">
  <a href="https://www.php.cn/link/0361f1baaa8ed070dfe62ae2245bcbed">a</a>
  <div class="content">this is a id</div>
</div>
<div id="b" class="page">
  <a href="#b">b</a>
  <div class="content">this is b id</div>
</div>
<div id="c" class="page">
  <a href="#c">c</a>
  <div class="content">this is c id</div>
</div>

✅ 对应 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;
}

⚠️ 注意事项：

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

:target ~ :not(.page:target) 依赖兄弟关系，因此所有 .page 必须处于同一层级且顺序排列；

此方案完全无需 JavaScript，兼容现代浏览器（IE9+），性能更优、语义更清晰；

若需支持返回时恢复锚点链接可见，可添加 :target ~ .page > a { display: inline; } 等回退样式，但本例聚焦“单页切换”场景，以简洁为目标。

? 扩展建议（可选增强）

添加 CSS 过渡动画提升体验：

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