纯css实现tab切换

前端开发中，经常会用到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

更多相关文章

随机推荐