用CSS3伪类target如何制作tab选项卡效果


我们都知道当我们点击#id的连接后,如果网页中有这个id的,网页会自动跳动到其所在位置,如果网页中没有这个id,它就没有任何显示。

 

css3中添加了伪类:target,使用:target伪类可以让点击后的id有新的效果,比如改变颜色、位置等等。所以我们可以用它做很多效果,比如tab标签等等。

伪类:target的使用方法和:link、:hover一样:
?
selector:target{
color:#;
/*other styles*/
}
利用target制作tab标签切换的原理是利用点击后改变容器的Y轴属性z-index的值。

Html代码:

<div class="tab_box">
<ul class="tabs">
<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">
第一层内容</div>
<div id="tab2" class="tab_content">
第二层内容 http://www.jzxue.com</div>
<div id="tab3" class="tab_content">
第三层内容 http://www.jzxue.com</div>
</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>

CSS部分有一些内容是比较重要的,首先tab_content里面要使用定位属性position:absolute,让三个tab标签内容重叠起来,然后利用z-index:-1让他们处于Z轴的靠下层,另外,如果不定义背景为白色,三个层的内容会重叠起来,显得十分混乱。

最后一部分CSS就是利用target伪类改变其z轴层次的,他们是成功实现效果的关键。

将这些代码拷贝到网页中,然后预览。这里要注意一点,只有支持CSS3的浏览器才可以看到效果,比如Firefoxgoogle Chrome、Opera,IE系列除了IE9以外,IE6、7、8是看不到效果的



相关阅读:
Linux文件系统x挂载工具--autofs介绍
500内部错误,asp日志报告“不允许的父路径”
ubuntu下无法用date函数设置时间的问题解决
Windows Server 2008 SP2即将发布
WordPress教程:query_posts()
HTML5中 b 和 i 标签将语义化
php中三个生成随机密码的方法对比
Fedora Linux系统中NTFS分区挂载的方法
java socket功能的一个小应用
Java源码分析:深入探讨Iterator模式
键盘 keycode的值 javascript时触发事件时很有用的要素
在Windows Vista侧栏显示多时区时钟
WordPress 实现简单的企业网站
选择与取消选择不错的应用 js
快速导航

Copyright © 2016 phpStudy |