如何用css制作标签页切换效果_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-18

浏览次数：次

返回列表

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

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

实现标签页切换效果不需要 J*aScript，纯 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 显示对应面板，体验更流畅。

eMart 网店系统

功能列表：底层程序与前台页面分离的效果，对页面的修改无需改动任何程序代码。完善的标签系统，支持自定义标签，公用标签，快捷标签，动态标签，静态标签等等，支持标签内的vbs语法，原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统，可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率，稳定性和容错性，即使模版中有错误的标签也不会影响页面的显示。所有的标

0 查看详情 eMart 网店系统

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