CSS tab选项卡(标签页)切换

在github上看到一篇 You dot need JavaScript 很多效果不需要js也能做到，比如手风琴的效果，轮播，弹出的对话框，工具提示，标签页的切换，多级的下拉菜单等等，css甚至还能做游戏！

之前就看到一个用css制作的轮播的例子，这次又遇到了，所以简单记录下。

观察了那篇github中的几个例子，不难发现凡是涉及到点击事件的都是通过隐藏的input和与之关联的label 点击label触发input的checked状态触发的，再配合使用元素状态的伪类 :checked 样式就可以实现不同状态的切换，中间的过度效果还可以配合CSS3的 transition 过度效果实现。下边的一个简单的标签页的切换例子 就是用这原理实现的。

页面结构

.html
<div class="tab-wrap">
<!-- active tab on page load gets checked attribute -->
<input type="radio" id="tab1" name="tabGroup1" class="tab" checked> <!-- 设置一个默认状态 -->
<label for="tab1">Short</label>
<input type="radio" id="tab2" name="tabGroup1" class="tab">
<label for="tab2">Medium</label>
<input type="radio" id="tab3" name="tabGroup1" class="tab">
<label for="tab3">Long</label>
<div class="tab__content">
<h3>Short Section</h3>
<p>Praesent...</p>
</div>
<div class="tab__content">
<h3>Medium Section</h3>
<p>Praesent...</p>
<p>In...</p>
</div>
<div class="tab__content">
<h3>Long Section</h3>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
</div>

主要样式：

.css
.tab__content {
padding: 10px 25px;
background-color: transparent;
position: absolute;
width: 100%;
z-index: -1;
opacity: 0;
left: 0;
transform: translateY(-3px);
border-radius: 6px;
}
/* 首先让内容部分都不可见，不占据文档流。 */

.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
opacity: 1;
transition: 0.5s opacity ease-in, 0.8s transform ease;
position: relative;
top: 0;
z-index: 100;
transform: translateY(0px);
text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
opacity: 1;
transition: 0.5s opacity ease-in, 0.8s transform ease;
position: relative;
top: 0;
z-index: 100;
transform: translateY(0px);
text-shadow: 0 0 0;
}

当有input在被选中的状态时， 选择与input同级的内容部分元素tab__content,它的样式将被设置为可见，占据文档流同时改变它的平移的位置，因为有过度的效果，所以点击后看起来是内容是向上顶出来的。

这一部分的代码都是重复的，可以用sass预处理循环， 设置一个最大值即可：

.scss
$max-tab-count: 5;
.tab {
display: none;
@for $i from 1 through  $max-tab-count {
&:checked:nth-of-type(#{$i}) ~ .tab__content:nth-of-type(#{$i}) {
opacity: 1;
transition: 0.5s opacity ease-in, 0.8s transform ease;
position: relative;
top: 0;
z-index: 100;
transform: translateY(0px);
text-shadow: 0 0 0;
}
}
}

以后选项卡的个数变化只需要将最大值定义更改就行。

demo