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

来源：互联网发布：linux 生成目录树编辑：程序博客网时间：2024/05/16 07:34

实例：CSS3 :target伪类实现Tab切换效果

下面简单介绍下如何用csse :target来制作一个无JavaScript的tab切换效果

HTML代码：

</pre><div class="tablist"> <ul class="tabmenu"> <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">tab1 content</div> <div id="tab2" class="tab_content">tab2 content</div> <div id="tab3" class="tab_content">tab3 content</div> <p></div></p><p></p><pre code_snippet_id="1626402" snippet_file_name="blog_20160328_11_2351130" name="code" class="html" style="color: rgb(105, 106, 82); font-size: 14px; line-height: 25.2px;">

css代码：

.tab_content {position: absolute;}#tab1:target, #tab2:target, #tab3:target {z-index: 1;}

原理其实很简单，就是把tab元素设为绝对对定位absolute,再通过:target伪类改变它们的层级（z-index）。

效果图

0 0