tab在当前的web应用中是非常常见的，最大的好处在于可以充分的利用有限的空间来展示更多的内容。常见的的tab一般都是通过javascript来实现，它的好处是灵活和功能强大。但是在某些情况下，如果仅仅需要一个简单的内容切换时是可以考虑使用纯css来实现的。本文主要介绍两种纯css的实现方案：
1. 锚点 + :target;
2. 纯锚点;
这两种各有各优点，也有各自的局限性。
具体的demo请查看这里
方案一: 锚点 + :target
css3中引入了一个新的伪类:target，当用户和页面进行某些交互时会触发，例如有以下的代码，当用户点击链接时，便会触发p元素的:target伪类。
link to dest
this is a new paragraph.
方案一便是利用:target伪类来实现tab切换。实现原理为：在页面加载的时候通过css隐藏tab相对应的内容，同时在:target伪类中将tab内容设置为可见。
html结构如下：
tab a
content a
tab b
content b
tab c
content c
tab d
content d
使用该结构的一个好处在于缺少css时依然可以清晰的阅读内容。
关键的css代码如下 dd{
padding: 5px;
/*隐藏tab的内容*/
display:none;
-moz-border-radius: 5px;
margin-top:20px
}
dd:target{
position: absolute;
/*显示tab的内容*/
display:block;
}
/*给tab以及相应的内容设置相同的背景色*/
.tab-a,.content-a{
background: #ccff00;
}
.tab-b,.content-b{
background: #ccffff;
}
.tab-c,.content-c{
background: #ffff00;
}
.tab-d,.content-d{
background: #ffccff;
}
使用css方案的一个弊端在于不易区分哪个tab是当前选中的，一个简单的方式是给相应的tab以及tab内容设置相同的背景色，这样当tab内容显示时，能够更清晰的辨别当前tab。此外，由于是使用了css3中的选择符，因此目前只能在firefox、safari、ie8等现代浏览器下使用。
方案二: 纯锚点
方案二的原理很简单，在大多数浏览器下，当点击锚点链接时，锚点对应的内容会自动跳到可视范围以内。根据该原理，将tab的所有内容放到一个固定高度的容器中，并且设置容器的overflow为hidden，此外每个tab内容的高度需要与容器保持一致。在该结构下，当点击锚点链接时对应的内容会自动跳转到可视范围以内容，即容器内。
具体的html结构如下：
tab a
tab b
tab c
tab d
content a
content b
content c
content d
由于和方案一的原理不一样，此处的html结构也只能使用tab和内容分离的结构，使用该结构的一个问题在于当css缺失的情况下无法清晰的阅读内容。
关键的css代码如下：
/*给tab content容器设置高度*/
#tab_content{
height: 190px;
overflow: hidden;
}
/*给每个tab content定高度，需要与容器保持一致*/
#tab_content .content{
padding: 5px;
-moz-border-radius: 5px;
height: 190px;
overflow: hidden;
}
与方案一一样，这里也通过给tab以及对应内容设置相同背景色来解决选中识别问题。
总结
1. 纯css实现的tab受限很多，比如方案二中需要给每个tab content设置相同的高度。
2. 无法有效的标识当前选中的tab，本文是通过设置相同背景色做区分，在很多情况下不一定适用。
3. 两个方案都存在兼容性问题，方案一使用了css3的选择符，受限于css的实现;而方案二据说在opera下不灵。
4. 方案一中，当点击其他会触发:target的锚点(或发生类似交互)时，tab content会隐藏。
http://www.bkjia.com/phpjc/735089.htmlwww.bkjia.comtruehttp://www.bkjia.com/phpjc/735089.htmltecharticletab在当前的web应用中是非常常见的，最大的好处在于可以充分的利用有限的空间来展示更多的内容。常见的的tab一般都是通过javascript来实现...