CSS实现标签页切换效果详解

<div class="tabs">
  &lt;input type=&quot;radio&quot; name=&quot;tab&quot; id=&quot;tab1&quot; checked&gt;
  <label for="tab1">首页</label>
<p>&lt;input type=&quot;radio&quot; name=&quot;tab&quot; id=&quot;tab2&quot;&gt;
<label for="tab2">关于</label></p><p>&lt;input type=&quot;radio&quot; name=&quot;tab&quot; id=&quot;tab3&quot;&gt;
<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>

.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>