首页 > 代码库 > CSS3 :target伪类实现Tab切换效果
CSS3 :target伪类实现Tab切换效果
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 id="tab1" class="tab_content">欢迎加设计达人Q群:50063010<br />设计达人以原创和分享一些高质量的设计文章为主,希望喜欢! <!-- end tab1 content --></div> <div id="tab2" class="tab_content"><p>本Tab切换效果纯CSS3制作,无任何JavaScript</p>最新Q群:50063010<br />爱设计,爱分享——设计达人(http://www.shejidaren.com) <!-- end tab2 content--></div> <div id="tab3" class="tab_content"><p style="font-size:24px;">高质量设计文章分享平台</p><p>欢迎加设计达人Q群:50063010<br />设计达人以原创和分享一些高质量的设计文章为主,希望喜欢</p> <!-- end tab3 content--></div> </div>
CSS3 :target伪类实现Tab切换效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。