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