前端开发中,经常会用到tab切换,最常用的做法是使用JS处理显示与隐藏,然而在H5开发中, 完全可以做到利用CSS3的伪类选择器实现这个效果,遗憾的是在IE8及以下,不可用。
先看整体效果:
为方便感兴趣的朋友,直接上代码:
html结构:
<div class="tab-box">
<input type="radio" name="demo" id="tab-switch-input1" checked="">
<input type="radio" name="demo" id="tab-switch-input2">
<input type="radio" name="demo" id="tab-switch-input3">
<div class="tab-box-label">
<label for="tab-switch-input1">
<span>tab1</span>
</label>
<label for="tab-switch-input2">
tab2
</label>
<label for="tab-switch-input3">
tab3
</label>
</div>
<div class="tab-contents">
<div class="tab-content">
content 1 显示
</div>
<div class="tab-content">
content 2 显示
</div>
<div class="tab-content">
content 3 显示
</div>
</div>
</div>
相关样式:
<style>
body{
font-family: 'microsoft yahei'
}
.tab-box {
margin: 20px 0;
font-size: 0;
}
.tab-box input {
display: none;
}
.tab-box label {
display: inline-block;
text-align: center;
width: 100px;
background-color: #0064cd;
color: #fff;
font-size: 18px;
line-height: 2;
}
.tab-content {
font-size: 14px;
width: 352px;
height: 200px;
margin-top: 5px;
border: solid 1px slategray;
display: none;
}
.tab-box input:nth-of-type(1):checked ~ .tab-contents .tab-content:nth-of-type(1),
.tab-box input:nth-of-type(2):checked ~ .tab-contents .tab-content:nth-of-type(2),
.tab-box input:nth-of-type(3):checked ~ .tab-contents .tab-content:nth-of-type(3) {
display: block;
}
.tab-box input:nth-of-type(1):checked ~ .tab-box-label label:nth-of-type(1) ,
.tab-box input:nth-of-type(2):checked ~ .tab-box-label label:nth-of-type(2),
.tab-box input:nth-of-type(3):checked ~ .tab-box-label label:nth-of-type(3) {
background-color: #88c846;
color: #fff;
}
</style>
分析:
此方法主要是借助input的checked属性控制其后面元素的显示与否,通过选中tab的nth-of-type属性,控制具体子模块。这也就注定了input和tab-contents必须同级(也即他们有共同的父元素);通过input的id和label的for属性,建立联系。
相关处理方法可以参考Tab Panel, the right way