html5伪类的用法,实用CSS3属性之 :target伪类实现Tab切换效果

实用CSS3属性之 :target伪类实现Tab切换效果

8月 17, 2011

评论 (2)

Sponsor

CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式，例如你要改变描链接指向#tab的元素字体颜色为蓝色，哪么你可以这样写成#tab:target {color:blue}

浏览器支持：

不支持IE8及以下的IE版本，IE9支持这个属性，其它非IE内核浏览器如：Firefox、Chrome、等这些浏览器都支持。

用法：

:target伪类与:hover、:link、:visited、:focus等伪类的用法一样

:target {color:blue}

实例：CSS3 :target伪类实现Tab切换效果

下面简单介绍下如何用csse :target来制作一个无JavaScript的tab切换效果

HTML代码：

• 标签一
• 标签二
• 标签三

tab1 content

tab2 content

tab3 content

CSS代码：

.tab_content {

position: absolute;

}

#tab1:target, #tab2:target, #tab3:target {

z-index: 1;

}

原理其实很简单，就是把tab元素设为绝对对定位absolute,再通过:target伪类改变它们的层级(z-index)。

查看本例的 Demo

扩展阅读:

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

想念 -

2016 年 05 月 10 日 上午 11:02

你好，我使用你这个的时候，切换的时候，两个tab之间会出现重叠，这是怎么回事呢？

熠熠 -

2011 年 08 月 20 日 下午 11:51

NICE！拿走了。

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站