《
用CSS3伪类target如何制作tab选项卡效果》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023441R013.htm
css3中增加了伪类:target,用CSS Sprites加快网页加载速度，使用:target伪类可以让点击后的id有新的效果，好比改变色彩、位置等等。所以我们可以用它做良多效果，比如tab标签等等。
伪类:target的使用方式跟:link、:hover一样：
selector:target{
color:#;
/*other styles*/
}
利用target制作tab标签切换的原理是利用点击后改变容器的Y轴属性z-index的值。
Tag： CSS3 伪类 target Tab选项卡 CSS3 伪类 target Tab选项卡
CSS部门有一些内容是比拟主要的，首先tab_content里面要应用定位属性position:absolute，让三个tab标签内容重叠起来，而后利用z-index:-1让他们处于Z轴的靠下层，另外，如果不定义背景为白色，三个层的内容会重叠起来，显得非常凌乱。
Html代码：
最后一局部CSS就是应用target伪类转变其z轴档次的，他们是胜利实现后果的要害。
<div class="tab_box">
<ul class="tabs">,用class实现IE8“添加网页快讯”功能;
<li><a href="#tab1">标签一</a></li>
<li><a href="#tab2">标签二</a></li>
<li><a href="#tab3">标签三</a></li>
</ul>
<div id=",用br代替div清除浮动;tab1" class="tab_content">
第一层内容</div>,用a程序读取网站的alexa世界排名;
<div id="tab2" class="tab_content">
第二层内容
<div id="tab3" class="tab_content">
第三层内容
</div>
Html代码部分不要忘却将链接的标签写成#tab1、#tab2和#tab3，否则不能实现效果。
CSS代码：
<style type="text/css">
<!--
.tab_box {
clear:both;
height:40px;
}
.tab_box li {
float:left;
border:1px solid #CCC;
margin:0 5px 0 0;
list-style:none;
padding:5px;
}
.tab_content {
clear:both;
border:1px solid #CCC;
padding:20px;
margin:40px;
position: absolute;
z-index:-1;
background:#FFF;
width:300px;
height:200px;
}
#tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}
-->
</style>
将这些代码拷贝到网页中，然后预览。这里要留神一点，只有支撑CSS3的阅读器才能够看到效果，比方Firefox、google Chrome、Opera，IE系列除了IE9以外，IE6、7、8是看不到效果的。
我们都晓得当咱们点击#id的衔接后，假如网页中有这个id的，网页会主动跳动到其所在地位,生命科学类网站发展模式，如果网页中没有这个id，它就不任何显示。
--> [
网站建设之]用CSS3伪类target如何制造tab选项卡效果
(责任编辑：网站建设)
用CSS3伪类target如何制作tab选项卡效果相关文章