纯CSS3制作Tabs选项卡
Tabs选项卡对于Web前端攻城师来说并不陌生，也制作了不少，我们在《CSS3+jQuery制作切角的Tabs》也介绍了一个使用CSS3配合jQuery制作Tabs的实例。我想大家在制作Tabs选项卡大多数都是使用jQuery或者javaScript来实现的。而单独使用纯CSS来制作Tabs来说还是比较少见。随着CSS3和CSS技术不断的更新,我们放弃使用jQuery或javaScrip来制作Tabs选项卡从此不在是一件难事了，那么今天我就要和你一起见证这一事实——使用纯CSS制作Tabs选项卡。
使用纯CSS来制作Tabs选项卡，我们主要是借助CSS的“:hover”来实现。使用“:hover”制作Tabs选项卡，前提有一个条件，那就是不考虑IE6浏览器下的效果。具体原因我想不用我说大家都知道了，那就是因为在IE6浏览器下只有<a>元素支持“:hover”，那么如果其他元素要使用“:hover”就必须借助jQuery(具体如何实现大家可以参考前面的《浏览器兼容之旅的第四站:IE常见Bug——part2》)，这样一来就违背了我们的初衷，所以我们在此放弃IE6浏览器下的效果。别的先不说了，我们一起进入今天的主题吧。
HTML Markup
制作Tabs的结构大家在熟悉不过了，下面我们也按老样子创建一个结构清洁具有语义化的Tabs选项卡的HTML Markup。
<div id="cssTabs"> <div id="tab1" class="uiTab"> <h3 class="tabHead">Header for Tab1</h3 <div class="tabContent">Content for Tab1</div> </div> <div id="tab2" class="uiTab"> <h3 class="tabHead">Header for Tab2</h3> <div class="tabContent">Content for Tab2</div> </div> <div id="tab3" class="uiTab"> <h3 class="tabHead">Header for Tab3</h3> <div class="tabContent">Content for Tab3</div> </div> </div>
在上面的HTML Markup中，我们拥有：
- 有一个div，包含了Tabs所有内容——div#cssTabs;
- 三个Tabs选项，而且每个选项放在一个div中——div#tab1,div#tab2,div#tab3
- 在各个div#tabs中包含了一个标题h3.tabHead和选项卡所对应的内容div#tabContent
CSS Code
结构有了，我们现在需要的就是给Tabs样式了。
/*CSS Tabs style*/
#cssTabs {
position: relative;
width: 600px;
height: 290px;
margin: 0 auto;
}
.tabHead {
font-weight: normal;
padding: 5px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #000;
border-width: 1px 1px 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
width: 140px;
position: absolute;
left: 0;
top: 0;
background: #fff;
cursor: pointer;
}
.tabContent {
padding: 10px 20px;
background: #fff;
border: 1px solid #000;
position: absolute;
top: 40px;
left: 0;
height: 230px;
width: 100%;
}
#tab1 .tabHead {
z-index: 3;
}
#tab2 .tabHead {
left: 155px;
z-index: 1;
}
#tab3 .tabHead {
left: 310px;
z-index: 1;
}
#tab1 .tabContent {
z-index: 2;
}
这里我们主要使用了绝对定位来给Tabs定的位，并且使用“z-index”的不同值来控制各个元素的层次关系。首先给每个Tabs的标题进行位置定位，使其横排在顶部，并按先后顺序排列；而Tabs对应的主内容也进行绝对定位，并且安放在同一位置。现在最关键的就是他们所在Z轴的先后顺序，我们主要使用“z-index”来控制其层次，首先将所有"tabHead"定在“1”层位置，而所有内容定位在“2”层位置，这样一来让所有标题都在对应的内容下面，但为了主选项卡标题和主内容能相互对应，增强视觉效果，在将“tab1”的“tabHead”提高到所有内容上面，此处将其设置值为“3”,具体代码如上，其修饰后的效果如下所示：
接下来是我们使用CSS实现Tabs功能的关键一步，此处我们只是实现“hover”状态的Tabs效果，也就是说，当鼠标移动到对应的标题上，显示相对应的选项卡内容，比如说我们将鼠标移动到“tab2”的标题上，显示相对应的主内容，但当我们鼠标离开所有选项卡标题位置时，以恢复到默认状态，也就是上图显示的样子。那么下面我们来看如何使用“:hover”来实现其功能：
#tab1:hover h3,
#tab1:focus h3,
#tab1:active h3,
#tab2:hover h3,
#tab2:focus h3,
#tab2:active h3,
#tab3:hover h3,
#tab3:focus h3,
#tab3:active h3 {
z-index: 4;
font-weight: bold;
}
#tab1:hover .tabContent,
#tab1:focus .tabContent,
#tab1:active .tabContent,
#tab2:hover .tabContent,
#tab2:focus .tabContent,
#tab2:active .tabContent,
#tab3:hover .tabContent,
#tab3:focus .tabContent,
#tab3:active .tabContent {
z-index: 3;
}
上面的代码是我们实现Tabs功能的关键一步，分别在各“tabs”的"hover"，“focus”和“active”状态下，改变相应的“z-index”的层次关系。这里有一点需要保证“首先要将"hover"状态下的选项卡主内容都比前面的默认“z-index”值大，而同时必须保证各选项卡的标题在“z-index”的值大。”这样一来我们就能实现所需的Tabs效果。
现在功能实现了，我们还可以使用CSS3的transition来给其增加一点动态变化的效果：
.tabContent {
opacity: 0;
filter: alpha(opacity=0);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition : opacity 0.5s ease-in 0.218s;
-moz-transition : opacity 0.5s ease-in 0.218s;
-o-transition : opacity 0.5s ease-in 0.218s;
-ms-transition : opacity 0.5s ease-in 0.218s;
transition : opacity 0.5s ease-in 0.218s;
}
#tab1 .tabContent {
opacity: 1;
filter: alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#tab1:hover .tabContent,
#tab1:focus .tabContent,
#tab1:active .tabContent,
#tab2:hover .tabContent,
#tab2:focus .tabContent,
#tab2:active .tabContent,
#tab3:hover .tabContent,
#tab3:focus .tabContent,
#tab3:active .tabContent {
opacity: 1;
filter: alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
这样我们就给Tabs添加了一点点动化效果，具体可以参考下面有关于制作Tabs的全部CSS代码
CSS CODE（全部效果代码）：
*{margin: 0;padding:0;}
body {margin: 0;padding: 20px 50px;}
/*CSS Tabs style*/
#cssTabs {
position: relative;
width: 600px;
height: 290px;
margin: 0 auto;
}
.tabHead {
font-weight: normal;
padding: 5px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #000;
border-width: 1px 1px 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
width: 140px;
position: absolute;
left: 0;
top: 0;
background: #fff;
cursor: pointer;
}
.tabContent {
padding: 10px 20px;
background: #fff;
border: 1px solid #000;
position: absolute;
top: 40px;
left: 0;
height: 230px;
width: 100%;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition : opacity 0.5s ease-in 0.218s;
-moz-transition : opacity 0.5s ease-in 0.218s;
-o-transition : opacity 0.5s ease-in 0.218s;
-ms-transition : opacity 0.5s ease-in 0.218s;
transition : opacity 0.5s ease-in 0.218s;
}
#tab1 .tabHead {
z-index: 3;
}
#tab2 .tabHead {
left: 155px;
z-index: 1;
}
#tab3 .tabHead {
left: 310px;
z-index: 1;
}
#tab1 .tabContent {
z-index: 2;
opacity: 1;
filter: alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#tab1:hover h3,
#tab1:focus h3,
#tab1:active h3,
#tab2:hover h3,
#tab2:focus h3,
#tab2:active h3,
#tab3:hover h3,
#tab3:focus h3,
#tab3:active h3 {
z-index: 4;
font-weight: bold;
}
#tab1:hover .tabContent,
#tab1:focus .tabContent,
#tab1:active .tabContent,
#tab2:hover .tabContent,
#tab2:focus .tabContent,
#tab2:active .tabContent,
#tab3:hover .tabContent,
#tab3:focus .tabContent,
#tab3:active .tabContent {
z-index: 3;
opacity: 1;
filter: alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
上面只使用了几个CSS3的属性，当然你还可以使用更多的CSS3技术，制作出更炫更靓丽的Tabs。
缺点：
使用纯CSS制作Tabs有几个缺点让我们无法忍受：这一切的效果都是在一个固定的宽度和高度的范围内完成的，特别是Tabs选项卡对应的主内容，当其内容超过所设置的高度时无法自适应，就算使用“overfow:auto”也会增有损我们的视觉效果；另上一个就是无法在IE6下正常运行，原因就不说了，在说无语了。
优点：
使用纯CSS制作Tabs有一个最大的优点：使用这种方法制作Tabs无需使用任何jQuery和JavaScript脚本，在不支持脚本的浏览器中也能正常运行。
虽然效果有点呆板，但也不为是一种方法，但具体是否适合运用到项目中，还需考虑，因为我至今为止还没有看到这种方法使用到具体的项目中，所以大家使用时考虑为先。那么到此有关于使用纯CSS制作Tabs就介绍到此。具体效果大点可以点击Demo。
如需转载烦请注明出处：W3CPLUS