如何用css制作标签页切换效果-css教程-PHP中文网

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

P粉602998670

发布： 2025-10-18 21:24:01

原创

821人浏览过

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

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

实现标签页切换效果不需要 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>

CSS 样式：

.tab-content {
display: none;
}

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

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

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

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

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

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

小羊标书

一键生成百页标书，让投标更简单高效

查看详情

HTML 结构：

CSS 样式：

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;
}