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

P粉602998670 2025-10-18 00:00:00 次阅读

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

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

方法一：使用 :target 伪类

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

示例结构：

  首页
  关于
  联系
  这是首页内容
  这是关于内容
  这是联系内容
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;
}