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

css制作标签页切换效果

P粉602998670

发布： 2025-10-27 08:30:04

原创

1017人浏览过

答案：利用radio按钮与label结合:checked伪类实现无JS标签页切换，通过隐藏radio、样式化label、控制后续内容块的显示与隐藏完成交互，结构清晰且兼容性好。

css制作标签页切换效果

用CSS制作标签页切换效果，核心思路是利用HTML的锚点链接或radio单选按钮配合实现无JavaScript的交互。下面介绍一种纯CSS实现的简易标签页切换方法。

1. 使用Radio按钮和label实现切换

通过隐藏radio按钮，使用label模拟标签按钮，再用:checked伪类控制内容显示。

结构如下：

<div class="tabs">
  <input type="radio" name="tab" id="tab1" checked>
  <label for="tab1">首页</label>
<p><input type="radio" name="tab" id="tab2">
<label for="tab2">关于</label></p><p><input type="radio" name="tab" id="tab3">
<label for="tab3">联系</label></p><p><div class="tab-content" id="content1">这里是首页内容</div>
<div class="tab-content" id="content2">这里是关于内容</div>
<div class="tab-content" id="content3">这里是联系内容</div>
</div></p>

登录后复制

2. 添加CSS样式控制显示与隐藏

关键在于默认隐藏所有内容，当某个radio被选中时，对应的内容才显示。

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

小羊标书

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

查看详情

.tabs {
  width: 400px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}
<p>/<em> 隐藏radio按钮 </em>/
.tabs input[type="radio"] {
display: none;
}</p><p>/<em> 标签样式 </em>/
.tabs label {
display: inline-block;
padding: 10px 15px;
background: #f0f0f0;
cursor: pointer;
border-radius: 6px 6px 0 0;
margin-right: 5px;
}</p><p>/<em> 选中状态的标签 </em>/
.tabs input[type="radio"]:checked + label {
background: #007cba;
color: white;
}</p><p>/<em> 内容区域 </em>/
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ddd;
border-radius: 0 6px 6px 6px;
background: #fff;
margin-top: -1px;
}</p><p>/<em> 默认显示第一个内容 </em>/</p><h1>tab1:checked ~ #content1,</h1><h1>tab2:checked ~ #content2,</h1><h1>tab3:checked ~ #content3 {</h1><p>display: block;
}</p>

登录后复制