CSS3 :target伪类实现Tab切换效果 BY commy

http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1

• 标签一
• 标签二
• 标签三

欢迎加设计达人Q群：50063010

设计达人以原创和分享一些高质量的设计文章为主，希望喜欢！

本Tab切换效果纯CSS3制作，无任何JavaScript

最新Q群：50063010

爱设计，爱分享——设计达人（http://www.shejidaren.com）

高质量设计文章分享平台

欢迎加设计达人Q群：50063010

设计达人以原创和分享一些高质量的设计文章为主，希望喜欢

CSS样式

.tablist {position:relative;margin:50px auto;min-height:200px;}
/* this example style begin */
.tab_content {
        position: absolute;/*set content box as absolute*/
        /* content style begin*/
        width:600px;height:170px;padding:15px;border:1px solid #91a7b4;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,0.1);font-size:1.2em;line-height:1.5em;color:#666;background:#fff;
}
#tab1:target, #tab2:target, #tab3:target {
        z-index: 1;
}


/* tabmenu style */
.tabmenu {position:absolute;top:100%;margin:0;}
        .tabmenu li{display:inline-block;}
        .tabmenu li a {display:block;padding:5px 10px;margin:0 10px 0 0;border:1px solid #91a7b4;border-radius:0 0 5px 5px;background:#e3f1f8;color:#333;text-decoration:none;}

HTML代码

<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 >高质量设计文章分享平台</p><p>欢迎加设计达人Q群：50063010<br />设计达人以原创和分享一些高质量的设计文章为主，希望喜欢</p>


    <!-- end tab3 content--></div>


</div>