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

2020-03-22 19:22:46

字体：大中小

来源：转载

供稿：网友

我们都知道当我们点击#id的连接后，如果网页中有这个id的，网页会自动跳动到其所在位置，如果网页中没有这个id，它就没有任何显示。css3中添加了伪类:target，使用:target伪类可以让点击后的id有新的效果，比如改变颜色、位置等等。所以我们可以用它做很多效果，比如tab标签等等。伪类:target的使用方法和:link、:hover一样：
?
selector:target{
color:#;
/*other styles*/
}
利用target制作tab标签切换的原理是利用点击后改变容器的Y轴属性z-index的值。Html代码： div
ul
li a href="#tab1" 标签一 /a /li
li a href="#tab2" 标签二 /a /li
li a href="#tab3" 标签三 /a /li
/ul
div id="tab1"
第一层内容 /div
div id="tab2"
第二层内容 http://www.jzxue.com /div
div id="tab3"
第三层内容 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的浏览器才可以看到效果，比如Firefox、google Chrome、Opera，IE系列除了IE9以外，IE6、7、8是看不到效果的html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：yii2 页面底部加载css和js的技巧

下一篇：用css网站布局之十步实录！（十）