实用CSS3属性之 :target伪类实现Tab切换效果
浏览数：24 /
时间：2015年06月09日
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代码：
<div class="tablist"> <ul class="tabmenu"> <li><a href="#tab1">标签一</a></li> <li><a href="#tab2">标签二</a></li> <li><a href="#tab3">标签三</a></li> </ul> <div id="tab1" class="tab_content">tab1 content</div> <div id="tab2" class="tab_content">tab2 content</div> <div id="tab3" class="tab_content">tab3 content</div> </div>CSS代码：
.tab_content {
position: absolute;
}
#tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}
原理其实很简单，就是把tab元素设为绝对对定位absolute,再通过:target伪类改变它们的层级（z-index）。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
