《
纯CSS实现Tab选项卡的两种方案》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023455H013.htm
4. 方案一中，当点击其余会触发:target的锚点(或产生相似交互)时，Tab Content会暗藏。
详细的HTML结构如下： <ul id="tab_nv">
<li class="tab-a"><a href="#a2">Tab A</a></li>
<,纯CSS实现Tab的两种方案;li class="tab-b"><a href="#b2">Tab B</a></li>
<li class="tab-c"><,纯CSS如何实现三列DIV等高布局;a href="#c2">Tab C</a></li>
<li class="tab-d"><a href="#d2">Tab D</a></li>
</ul>
<div id="tab_content">
<div id="a2" class="content content-a">
Content A
</div>
<div id="b2",纯CSS圆角框：透明圆角化背景图片; class="content content-b">
Content B
</div>
<div id="c2" class="content content-c">
Content C
</div>
<div id="d2" class="content content-d">
Content D
</div>
</div>
与方案逐一样，这里也通过给Tab以及对应内容设置雷同背风景来解决选中辨认问题。
HTML结构如下：
<dl>
<dt class="tab-a first"><a href="#a">Tab A</a></dt>
<dd id="a" class="content-a">
Content A
</dd>
<dt class="tab-b"><a href="#b">Tab B</a></dt>
<dd id="b" class="content-b">
Content B
</dd>
<dt class="tab-c"><a href="#c">Tab C</a></dt>
<dd id="c" class="content-c">
Content C
</dd>
<dt class="tab-d"><a href="#d">Tab D</a></dt>
<dd id="d" class="content-d">
Content D
</dd>
</dl>
使用该结构的一个利益在于缺乏CSS时仍然能够清楚的浏览内容。
要害的CSS代码如下
2. 无法有效的标识当前选中的Tab，本文是通过设置相同背景色做分辨，在许多情况下不必定实用。
使用CSS方案的一个弊病在于不易辨别哪个Tab是当前选中的，一个简单的方法是给相应的Tab以及Tab内容设置相同的背景色，这样当Tab内容显示时，可能更清晰的分辨当前Tab。此外，因为是使用了CSS3中的取舍符，因而目前只能在Firefox、Safari、IE8等古代浏览器下使用。
1. 纯CSS实现的Tab受限良多，比方方案二中需要给每个Tab Content设置相同的高度。
1. 锚点 + :target;
方案二: 纯锚点
Tag：Tab选项卡 Tab选项卡
详细的Demo请查看这里
总结
CSS3中引入了一个新的伪类:target，当用户和页面进行某些交互时会触发，例如有以下的代码，当用户点击链接时，便会触发p元素的:target伪类。 <a href="#dest">Link to Dest</a>
<p id="dest">This is a new paragraph.</p>
症结的CSS代码如下： /*给Tab Content容器设置高度*/
#tab_content{
height: 190px;
overflow: hidden;
}
/*给每个Tab Content定高度，需要与容器保持一致*/
#tab_content .content{
padding: 5px;
-moz-border-radius: 5px;
height: 190px;
overflow: hidden;
}
因为跟方案一的原理不一样，此处的HTML结构也只能使用Tab和内容分别的结构，使用该结构的一个问题在于当CSS缺失的情形下无奈清晰的阅读内容。
dd{
padding: 5px;
/*隐藏Tab的内容*/
display:none;
-moz-border-radius: 5px;
margin-top:20px
}
dd:target{
position: absolute;
/*显示Tab的内容*/
,纯CSS圆角框：基本的圆角框; display:block;
}
/*给Tab以及相应的内容设置相同的背景色*/
.tab-a,.content-a{
background: #CCFF00;
}
.tab-b,.content-b{
,纯CSS圆角框：圆角化图片; background: #CCFFFF;
}
.tab-c,.content-c{
background: #FFFF00;
}
.tab-d,.content-d{
background: #FFCCFF;
}
这两种各有各长处，也有各自的局限性。
方案一便是应用:target伪类来实现Tab切换。实现原理为：在页面加载的时候通过CSS隐蔽Tab绝对应的内容，同时在:target伪类中将Tab内容设置为可见。
--> [
网站建设之]纯CSS实现Tab选项卡的两种方案
Tab在当前的Web利用中长短经常见的，最大的好处在于可以充足的利用有限的空间来展现更多的内容。常见的的Tab个别都是通过Javascript来实现，它的好处是机动和功效强盛。然而在某些情况下，假如仅仅需要一个简单的内容切换时是可以斟酌使用纯CSS来实现的。本文重要先容两种纯CSS的实现方案：
方案一: 锚点 + :target
3. 两个方案都存在兼容性问题，方案一应用了CSS3的抉择符，受限于CSS的实现;而方案二据说在Opera下不灵。
2. 纯锚点;
计划二的原理很简略，在大多数阅读器下，当点击锚点链接时，锚点对应的内容会自动跳到可视范畴以内。依据该原理，将Tab的所有内容放到一个固定高度的容器中，并且设置容器的overflow为hidden，此外每个Tab内容的高度须要与容器坚持一致。在该构造下，当点击锚点链接时对应的内容会主动跳转到可视规模以内容，即容器内。
(责任编辑：网站建设)
纯CSS实现Tab选项卡的两种方案相关文章