标签的显示与隐藏状态,从而实现标签切换的功能。
下面是一个简单的CSS3标签切换的代码示例:
<style>
.tab-box {
width: 500px;
height: 300px;
border: 1px solid #ccc;
overflow: hidden;
}
.tab-box input[type="radio"] {
display: none;
}
.tab-box .tab-label {
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
margin-right: 10px;
background: #ccc;
color: #fff;
cursor: pointer;
}
.tab-box .tab-label:hover {
background: #666;
}
.tab-box .tab-content {
float: left;
width: 400px;
height: 270px;
padding: 15px;
background: #fff;
display: none;
}
.tab-box input:checked + .tab-label {
background: #666;
}
.tab-box input:checked + .tab-label + .tab-content {
display: block;
}
</style>
<div class="tab-box">
<input type="radio" id="tab1" name="tab-group" checked>
<label class="tab-label" for="tab1">标签1</label>
<div class="tab-content">这是标签1的内容。</div>
<input type="radio" id="tab2" name="tab-group">
<label class="tab-label" for="tab2">标签2</label>
<div class="tab-content">这是标签2的内容。</div>
<input type="radio" id="tab3" name="tab-group">
<label class="tab-label" for="tab3">标签3</label>
<div class="tab-content">这是标签3的内容。</div>
</div>
在上述代码中,我们首先定义了一个名为.tab-box的CSS类来定义标签切换的外观和行为。然后,我们使用:checked伪类来控制被选中的