代码

这里主要使用表单的单选按钮来实现这个TAB显示和隐藏，首页tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显示内容。具体请看下面代码。

关于兼容性，因为是用CSS3来制作的，所以如果不支持CSS3的浏览将会出现不兼容的情况。

HTML代码

     
      
选项卡 1
       
        
选项卡内容 1
       
      
选项卡 2
       
        
选项卡内容 2
       
     

CSS代码

* {
     margin: 0;  padding: 0;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}body {
     padding: 20px;  text-align: left;  font-family: Lato;  color: #fff;  background: #9b59b6;}.tabs {
     width: 650px;  float: none;  list-style: none;  position: relative;  margin: 80px 0 0 10px;  text-align: left;}.tabs li {
     float: left;  display: block;}.tabs input[type="radio"] {
     position: absolute;  top: -9999px;  left: -9999px;}.tabs label {
     display: block;  padding: 14px 21px;  border-radius: 2px 2px 0 0;  font-size: 20px;  font-weight: normal;  text-transform: uppercase;  background: #8e44ad;  cursor: pointer;  position: relative;  top: 4px;  -webkit-transition: all 0.2s ease-in-out;  -moz-transition: all 0.2s ease-in-out;  -o-transition: all 0.2s ease-in-out;  transition: all 0.2s ease-in-out;}.tabs label:hover {
     background: #703688;}.tabs .tab-content {
     z-index: 2;  display: none;  overflow: hidden;  width: 100%;  font-size: 17px;  line-height: 25px;  padding: 25px;  position: absolute;  top: 53px;  left: 0;  background: #612e76;}.tabs [id^="tab"]:checked + label {
     top: 0;  padding-top: 17px;  background: #612e76;}.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
     display: block;}