纯 CSS 选项卡的实现例子
eb开发中，选项卡效果是非常常见的。几乎所有的大型网站都在使用，如新浪、网易、腾迅······ 查看源代码，你会发现都是基于JavaScript实现的。那么只基于CSS 可以实现选项卡么？可以嘀
基于锚点定位实现的选项卡
很多人只知道A标签做超链接，却不知道其另一个功能，页面内容的锚点定位：
<a href="#bottom">点击跳转到页面底部</a>
点击上面的链接，会自动定位到网页中id为bottom的元素，实际上改变的是改变侧边滚动的scrollTop值，你可以点击下面DEMO下载，查看原理演示DEMO。
下面是基于描点定位选项卡实现的HTML代码
<div class="css-tab">
<ul class="tab-ul">
<li><a href="#tab-1">选项卡1</a></li>
<li><a href="#tab-2">选项卡2</a></li>
</ul>
<div class="tab-con">
<div id="tab-1">
这里放选项卡1的内容
</div>
<div id="tab-2">
这里放选项卡2的内容
</div>
</div>
</div>
下面基本的CSS样式
*{
margin: 0;
padding: 0;
}
.clearfix {
*zoom:1;
}
.clearfix:before ,.clearfix:after {
display: table;
line-height: 0;
content: '';
}
.clearfix:after {
clear: both;
}
.css-tab {
width: 200px;
height:auto;
margin: 8px auto;
}
.tab-ul {
padding-left: 1px;
}
.tab-ul li{
padding-left: 8px;
padding-right: 8px;
line-height: 28px;
border: 1px solid #ccc;
margin-left: -1px;
border-bottom:none ;
float: left;
list-style: none;
}
.tab-ul li a {
text-decoration: none;
}
.tab-con {
overflow: hidden;
}
.tab-con,#tab-1,#tab-2 {
height: 200px;
}
#tab-1 {
background: #B3C2DE;
}
#tab-2 {
background: #d8ffef;
}
关于以上演示代码，你可以点击演示DEOM在线查看和研习，当然你也可以轻松的下载源代码：
查看DEMO 下载DEMO
基于CSS选择器实现的选项卡效果
在CSS 3中，CSS 的选择器是扩充了。在制作选项卡的过程中，我们会通过到“属性选择器”和“兄弟选择器”。具体实现的HTML代码结构如下：
<div class="tabs">
<div class="tab">
<label for="check1">第1个选项卡</label>
<input id="check1" type="radio" name="tabs" checked="checked" />
<div class="content">
这里放置第1个选项卡的内容
</div>
</div>
<div class="tab">
<label for="check2">第2个选项卡</label>
<input id="check2" type="radio" name="tabs" />
<div class="content">
这里放置第2个选项卡的内容
</div>
</div>
<div class="tab">
<label for="check3">第3个选项卡</label>
<input id="check3" type="radio" name="tabs" />
<div class="content">
这里放置第3个选项卡的内容
</div>
</div>
</div>
这是相应的CSS：
*{
margin: 0;
padding: 0;
}
.clearfix {
*zoom:1;
}
.clearfix:before ,.clearfix:after {
display: table;
line-height: 0;
content: '';
}
.clearfix:after {
clear: both;
}
.tabs {
width:300px;
height: 300px;
background: pink;
position: relative;
}
.tab {
float: left;
width:80px;
height: 70px;
overflow: visible;
}
.tab label {
display: block;
width:80px;
height: 40px;
line-height: 40px;
cursor: pointer;
font-size: 13px;
}
.tab input {
display: none;
}
.content {
position: absolute;
top: 40px;
left: 0;
width: 300px;
height: 260px;
z-index: 1;
}
.tab input:checked ~ .content {
z-index: 2;
background: pink;
}
注意：基于选择器的选项卡由于低版本的IE浏览器对高级选择器不支持，故选项卡效果是不支持切换的。另外，选择器在IE 8中必须文档声明为HTML 5才能正常解析。为了让低版本的ie也支持一些高级选择器，你可以看一下selectivizr。
您可能感兴趣的文章：
纯 CSS 选项卡的实现例子
基于JQuery的6个Tab选项卡插件
jquery自动切换tabs选项卡的实现代码
纯CSS实现Tab页切换效果
Jquery tab选项卡的实现代码
Win 7下怎么启用和禁用IE浏览器多窗口选项卡功能？
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Jquery 经典选项卡的实现代码一例
JQuery Tab选项卡效果代码改进版
巧用radio实现纯css选项卡完美切换实例