纯Css制作tab选项卡

Css本身的功能就很强大的，尤其是Css3出来之后，大部分特效只用Css3就能完成了，无需再费心思去研究js、jQuery该怎么怎么去写，代码简洁方便。下面这个是用纯Css制作的tab选项卡效果：

用Css实现这个选项卡效果，需要用到label标签，label标签不会呈现任何效果，当点击label时，浏览器会自动将焦点转到和标签相关的的表单控件上。
这个用Css实现tab效果的主要思路是：使用表单的单选按钮来实现这个tab显示和隐藏，首先tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显示内容。
这里使用input元素链接把类型改为单选框类型（radio），每个iuput元素都有一个值，我们就通过添加 checked 的属性来使 input 默认为选中状态。

初始是这样的单选框，就给input标签添加隐藏属性，把单选框隐藏起来。

下面是HTML代码：

label不起任何效果。Input标签将覆盖label标签，这样看起来就好像我们点击了label标签ÿ