CSS实现Tab技巧
1. 锚点 + :target;
2. 纯锚点;
这两种各有各优点,也有各自的局限性。
具体的Demo请查看这里
方案一: 锚点 + :target
CSS3中引入了一个新的伪类:target,当用户和页面进行某些交互时会触发,例如有以下的代码,当用户点击链接时,便会触发p元素的:target伪类。
Link to Dest
This is a new paragraph.
方案一便是利用:target伪类来实现Tab切换。实现原理为:在页面加载的时候通过CSS隐藏Tab相对应的内容,同时在:target伪类中将Tab内容设置为可见。
HTML结构如下:
dd{ |
使用CSS方案的一个弊端在于不易区分哪个Tab是当前选中的,一个简单的方式是给相应的Tab以及Tab内容设置相同的背景色,这样当Tab内容显示时,能够更清晰的辨别当前Tab。此外,由于是使用了CSS3中的选择符,因此目前只能在Firefox、Safari、IE8等现代浏览器下使用。
方案二: 纯锚点
方案二的原理很简单,在大多数浏览器下,当点击锚点链接时,锚点对应的内容会自动跳到可视范围以内。根据该原理,将Tab的所有内容放到一个固定高度的容器中,并且设置容器的overflow为hidden,此外每个Tab内容的高度需要与容器保持一致。在该结构下,当点击锚点链接时对应的内容会自动跳转到可视范围以内容,即容器内。
具体的HTML结构如下:
Content A
Content B
Content C
Content D
由于和方案一的原理不一样,此处的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技巧
-
【急求】CDN中实现 CSS/JS 自动压缩的方案?
-
JavaScript实现继承的4种方法总结_javascript技巧
-
js动态创建上传表单通过iframe模拟Ajax实现无刷新_javascript技巧
-
html+css实现手机缩放,频幕转换_html/css_WEB-ITnose
-
javascript实现des解密加密全过程_javascript技巧
-
javascript插入样式实现代码_javascript技巧
-
简单实现"回车!=提交"(去除表单的回车即提交)_html/css_WEB-ITnose
-
使用phantomjs进行网页抓取的实现代码_javascript技巧
-
javascript实现 在光标处插入指定内容_javascript技巧