Css实现tab选项卡切换的方法:利用target的特性,可以实现纯css的tab效果切换,代码为【#tab1:target,#tab2:target,#tab3:target{z-index:1;}】。
本教程操作环境:windows7系统、css3版,DELL G3电脑。
Css实现tab选项卡切换的方法:
CSS3伪类target
利用target的特性,可以实现纯css的tab效果切换
示例代码如下
代码如下:
<style type=text/css> .tabmenu{ position:absolute; top:-28px; left:144px; margin:0px; } .tabmenu li{ display:inline-block; } .tabmenu li a{ display:block; padding:5px 10px; margin:0 10px 0 0; border:1px solid #91a7b4; border-radius:5px 5px 0 0; background-color:#e3f1f8; color:#333; text-decoration: none; font-size:16px; } .tablist{ position:relative; top:200px; margin:0 auto; width:600px; min-height:200px; } .tab_content{ position:absolute; width:600px; height:170px; padding:15px; border:1px solid #91a7b4; border-radius:10px; Box-shadow:0 2px 3px rgba(0,0,0,0,1); font-size:16px; line-height:16px; color:#666; background-color:#fff; } #tab1:target,#tab2:target,#tab3:target{ z-index:1; } </style> <div class=tablist> <ul class=tabmenu> <li><a href=#tab1>tab1</a></li> <li><a href=#tab2>tab2</a></li> <li><a href=#tab3>tab3</a></li> </ul> <div id=tab1 class=tab_content>tab1</div> <div id=tab2 class=tab_content>tab2</div> <div id=tab3 class=tab_content>tab3</div> </div>
最关键的代码
代码如下:
#tab1:target,#tab2:target,#tab3:target{ z-index:1; }
先根据target的特性锚链接到对应的div,再根据z-index的属性,改变div的层级关系,从而实现tab的切换效果!
target兼容性
最后提一下兼容性问题:因为这是CSS3新特性,所以不兼容老版本的浏览器,例如IE678。
相关学习推荐:css教程
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。