您当前的位置: 首页 > 网站编程 > PHP教程 > CSS实现Tab技巧

CSS实现Tab技巧

作者:不详 来源:网络 发布时间: 2014-08-21 17:59 点击:
程序员们都知道一般Tab都是靠Javascript来实现的,javascript的好处是功能强大并且灵活。但是也有特殊情况,如果只需一个简单的内容切换我们就可以利用CSS实现Tab。那么CSS实现Tab需要如何操作呢?下面就和小编一起来学习CSS实现Tab技巧吧! 1. 锚点 + :target; 2. 纯

CSS实现Tab技巧

  程序员们都知道一般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会隐藏。

分享到:
本文"CSS实现Tab技巧"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 广告合作 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4