CSS实现Tab技巧

程序员们都知道一般Tab都是靠Javascript来实现的javascript的好处是功能强大并且灵活但是也有特殊情况如果只需一个简单的内容切换我们就可以利用CSS实现Tab那么CSS实现Tab需要如何操作呢？下面就和小编一起来学习CSS实现Tab技巧吧！
锚点 + :target;
纯锚点;
这两种各有各优点也有各自的局限性
具体的Demo请查看这里
方案一: 锚点 + :target
CSS中引入了一个新的伪类:target当用户和页面进行某些交互时会触发例如有以下的代码当用户点击链接时便会触发p元素的:target伪类
<a href="#dest">Link to Dest</a>
<p id="dest">This is a new paragraph</p>
方案一便是利用:target伪类来实现Tab切换实现原理为在页面加载的时候通过CSS隐藏Tab相对应的内容同时在:target伪类中将Tab内容设置为可见
HTML结构如下

<dl>
<dt class="taba first"><a href="#a">Tab A</a></dt>
<dd id="a" class="contenta">
Content A
</dd>
<dt class="tabb"><a href="#b">Tab B</a></dt>
<dd id="b" class="contentb">
Content B
</dd>
<dt class="tabc"><a href="#c">Tab C</a></dt>
<dd id="c" class="contentc">
Content C
</dd>
<dt class="tabd"><a href="#d">Tab D</a></dt>
<dd id="d" class="contentd">
Content D
</dd>
</dl>
使用该结构的一个好处在于缺少CSS时依然可以清晰的阅读内容
关键的CSS代码如下

dd{
padding: px;
/*隐藏Tab的内容*/
display:none;
mozborderradius: px;
margintop:px
}

dd:target{
position: absolute;
/*显示Tab的内容*/
display:block;
}
/*给Tab以及相应的内容设置相同的背景色*/
tabacontenta{
background: #CCFF;
}
tabbcontentb{
background: #CCFFFF;
}
tabccontentc{
background: #FFFF;
}
tabdcontentd{
background: #FFCCFF;
}

使用CSS方案的一个弊端在于不易区分哪个Tab是当前选中的一个简单的方式是给相应的Tab以及Tab内容设置相同的背景色这样当Tab内容显示时能够更清晰的辨别当前Tab此外由于是使用了CSS中的选择符因此目前只能在FirefoxSafariIE等现代浏览器下使用
方案二: 纯锚点
方案二的原理很简单在大多数浏览器下当点击锚点链接时锚点对应的内容会自动跳到可视范围以内根据该原理将Tab的所有内容放到一个固定高度的容器中并且设置容器的overflow为hidden此外每个Tab内容的高度需要与容器保持一致在该结构下当点击锚点链接时对应的内容会自动跳转到可视范围以内容即容器内
具体的HTML结构如下
<ul id="tab_nv">
<li class="taba"><a href="#a">Tab A</a></li>
<li class="tabb"><a href="#b">Tab B</a></li>
<li class="tabc"><a href="#c">Tab C</a></li>
<li class="tabd"><a href="#d">Tab D</a></li>
</ul>
<div id="tab_content">
<div id="a" class="content contenta">
Content A
</div>
<div id="b" class="content contentb">
Content B
</div>
<div id="c" class="content contentc">
Content C
</div>
<div id="d" class="content contentd">
Content D
</div>
</div>
由于和方案一的原理不一样此处的HTML结构也只能使用Tab和内容分离的结构使用该结构的一个问题在于当CSS缺失的情况下无法清晰的阅读内容
关键的CSS代码如下
/*给Tab Content容器设置高度*/
#tab_content{
height: px;
overflow: hidden;
}
/*给每个Tab Content定高度需要与容器保持一致*/
#tab_content content{
padding: px;
mozborderradius: px;
height: px;
overflow: hidden;
}
与方案一一样这里也通过给Tab以及对应内容设置相同背景色来解决选中识别问题
总结
纯CSS实现的Tab受限很多比如方案二中需要给每个Tab Content设置相同的高度
无法有效的标识当前选中的Tab本文是通过设置相同背景色做区分在很多情况下不一定适用
两个方案都存在兼容性问题方案一使用了CSS的选择符受限于CSS的实现;而方案二据说在Opera下不灵
方案一中当点击其他会触发:target的锚点(或发生类似交互)时Tab Content会隐藏