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

实例：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）。

效果图