CSS实现Tab技巧 -pc6资讯

您的位置：首页 → 网页设计 → PHP技巧 → CSS实现Tab技巧

CSS实现Tab技巧 时间：2011/8/11 9:02:15来源：本站原创作者：lff我要评论(0)

　　程序员们都知道一般Tab都是靠Javascript来实现的，javascript的好处是功能强大并且灵活。但是也有特殊情况，如果只需一个简单的内容切换我们就可以利用CSS实现Tab。那么CSS实现Tab需要如何操作呢？下面就和小编一起来学习CSS实现Tab技巧吧！
　　1. 锚点 + :target;
　　2. 纯锚点;
　　这两种各有各优点，也有各自的局限性。
　　具体的Demo请查看这里
　　方案一: 锚点 + :target
　　CSS3中引入了一个新的伪类: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="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代码如下

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结构如下：
<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. 两个方案都存在兼容性问题，方案一使用了CSS3的选择符，受限于CSS的实现;而方案二据说在Opera下不灵。
　　4. 方案一中，当点击其他会触发:target的锚点(或发生类似交互)时，Tab Content会隐藏。

相关视频

没有数据

文章评论

查看所有0条评论>>

热门文章 没有查询到任何记录。