知识大全 CSS实现Tab技巧

Posted 内容

篇首语：事常与人违，事总在人为。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 CSS实现Tab技巧相关的知识，希望对你有一定的参考价值。

CSS实现Tab技巧  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　程序员们都知道一般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 ><a href="#a">Tab A</a></dt>     <dd id="a" >     Content A     </dd>     <dt ><a href="#b">Tab B</a></dt>     <dd id="b" >     Content B     </dd>     <dt ><a href="#c">Tab C</a></dt>     <dd id="c" >     Content C     </dd>     <dt ><a href="#d">Tab D</a></dt>     <dd id="d" >     Content D     </dd> </dl> 使用该结构的一个好处在于缺少CSS时依然可以清晰的阅读内容 关键的CSS代码如下

　　dd     padding: px;     /*隐藏Tab的内容*/     display:none;     moz border radius: px;     margin top: px   dd:target     position: absolute;     /*显示Tab的内容*/     display:block; /*给Tab以及相应的内容设置相同的背景色*/ tab a content a     background: #CCFF ; tab b content b     background: #CCFFFF; tab c content c     background: #FFFF ; tab d content d     background: #FFCCFF;

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

相关参考