如何用css制作标签页切换效果

答案：纯CSS可通过:target伪类或radio+label实现标签页切换。1. 使用:target时，点击带锚点的链接显示对应ID内容，默认可设首个标签显示；2. 利用隐藏radio与label联动:checked状态，通过兄弟选择器控制内容块显示，配合样式美化实现流畅切换效果，适用于无需URL变化的场景。

实现标签页切换效果不需要 JavaScript，纯 CSS 就能完成，主要利用 :target 伪类或结合隐藏的单选框（radio button + label）来控制内容显示。下面介绍两种常见且实用的方法。

方法一：使用 :target 伪类

当页面 URL 带有锚点时，:target 可以匹配对应 ID 的元素，适合简单静态页面。

<div class="tabs">
  <a href="#tab1">首页</a>
  <a href="#tab2">关于</a>
  <a href="#tab3">联系</a>
  <div id="tab1" class="tab-content">这是首页内容</div>
  <div id="tab2" class="tab-content">这是关于内容</div>
  <div id="tab3" class="tab-content">这是联系内容</div>
</div>

.tab-content {
  display: none;
}

.tab-content:target {
  display: block;
}

点击链接后，URL 会带上 #tab1 这样的片段，对应 div 显示，其他隐藏。首次加载无 target，默认都不显示，可给一个默认显示项：

#tab1:not(:target) {
  display: block;
}

方法二：使用 radio + label 实现无刷新切换

通过隐藏 radio 按钮，用 label 触发选择，配合 :checked 显示对应面板，体验更流畅。

立即学习“前端免费学习笔记（深入）”；

Loomi

全球首个AI社媒内容多智能体系统

下载

<div class="tabs">
  <input type="radio" name="tab" id="tab1" checked>
  <label for="tab1">首页</label>

  <input type="radio" name="tab" id="tab2">
  <label for="tab2">关于</label>

  <input type="radio" name="tab" id="tab3">
  <label for="tab3">联系</label>

  <div class="tab-content" id="content1">首页内容</div>
  <div class="tab-content" id="content2">关于内容</div>
  <div class="tab-content" id="content3">联系内容</div>
</div>

input[type="radio"] {
  display: none;
}

.tab-content {
  display: none;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}

注意所有内容块需放在 radio 和 label 之后，才能用兄弟选择器 (~) 控制显示。label 点击会触发对应 radio 选中，从而显示关联内容。

美化标签样式

让标签看起来更像可点击的选项卡：

label {
  padding: 10px 15px;
  border: 1px solid #ccc;
  margin-right: -1px;
  background: #f5f5f5;
  cursor: pointer;
}

label:hover {
  background: #eaeaea;
}

input[type="radio"]:checked + label {
  background: white;
  border-bottom: none;
  z-index: 1;
}

.tab-content {
  border: 1px solid #ccc;
  padding: 20px;
  min-height: 100px;
}

通过 z-index 和边框调整，可做出“当前标签在最前”的视觉效果。