纯CSS实现Tab的两种方案

作者佚名技术来源 NET编程浏览发布时间 2012-05-23

　　使用CSS方案的一个弊端在于不易区分哪个Tab是当前选中的，一个简单的方式是给相应的Tab以及Tab内容设置相同的背景色，这样当Tab内容显示时，能够更清晰的辨别当前Tab。此外，由于是使用了CSS3中的选择符，因此目前只能在Firefox、Safari、IE8等现代浏览器下使用。

　　方案二: 纯锚点

　　方案二的原理很简单，在大多数浏览器下，当点击锚点链接时，锚点对应的内容会自动跳到可视范围以内。根据该原理，将Tab的所有内容放到一个固定高度的容器中，并且设置容器的overflow为hidden，此外每个Tab内容的高度需要与容器保持一致。在该结构下，当点击锚点链接时对应的内容会自动跳转到可视范围以内容，即容器内。

　　具体的HTML结构如下：

<ul id="tab_nv">
    <li class="tab-a"><a href="#a2">Tab A</a></li>
    <li class="tab-b"><a href="#b2">Tab B</a></li>
    <li class="tab-c"><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" 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>

　　由于和方案一的原理不一样，此处的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. 两个方案都存在兼容性

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: PHP获取MAC地址下一篇: PHP内核介绍及扩展开发指南—基础知识

关于纯CSS实现Tab的两种方案的所有评论

随机推荐