Tab在当前的Web应用中是非常常见的,最大的好处在于可以充分的利用有限的空间来展示更多的内容。常见的的Tab一般都是通过Javascript来实现,它的好处是灵活和功能强大。但是在某些情况下,如果仅仅需要一个简单的内容切换时是可以考虑使用纯CSS来实现的。本文主要介绍两种纯CSS的实现方案: 1. 锚点 + :target; 2. 纯锚点; 这两种各有各优点,也有各自的局限性。 方案一: 锚点 + :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 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: 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 a href="#a2" Tab A /a /li li a href="#b2" Tab B /a /li li a href="#c2" Tab C /a /li li a href="#d2" Tab D /a /li /ul div id="tab_content" div id="a2" Content A /div div id="b2" Content B /div div id="c2" Content C /div div id="d2" 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会隐藏 html教程