CSS3之 :target
简介
:target是CSS3众多实用伪类中的一个
可以用来匹配文档(页面)的URI中某个标志符的目标元素, 通俗的说, 就是包含有 " # " 的标志符, 也可以理解为锚点
<div class="menuSection" id="event">
<p><a href="#event">Event</a></p>
<div>
也就是说 :target 借助a标签改变页面中 锚点 / 锚链接 , 实现切换的效果
浏览器支持
不支持IE8及以下IE版本, 其余内核皆OK
实例1
静态tab栏
1 <div class="tablist"> 2 <ul class="tabmenu"> 3 <li><a href="#tab1">标签一</a></li> 4 <li><a href="#tab2">标签二</a></li> 5 <li><a href="#tab3">标签三</a></li> 6 </ul> 7 <div id="tab1" class="tab_content">this is tab1 content</div> 8 <div id="tab2" class="tab_content">this is tab2 content</div> 9 <div id="tab3" class="tab_content">this is tab3 content</div> 10 </div>
1 .tablist { 2 position: relative; 3 margin: 50px auto; 4 min-height: 200px; 5 } 6 .tabmenu { 7 position: absolute; 8 /* 包含整个padding-box */ 9 top: 100%; 10 margin: 0; 11 padding: 1px 0 0 15px; 12 } 13 .tabmenu li { 14 display: inline-block; 15 } 16 .tabmenu li a { 17 text-decoration: none; 18 display: block; 19 padding: 5px 10px; 20 margin: 0 10px 0 0; 21 border: 1px solid #91a7b4; 22 border-radius: 0 0 3px 3px; 23 background: #e3f1f8; 24 color: #333; 25 } 26 .tab_content { 27 position: absolute; 28 width: 600px; 29 height: 170px; 30 padding: 15px; 31 border: 1px solid #91a8b4; 32 border-radius: 3px; 33 box-shadow: 0 2px 3px rgba(0,0,0,0.1); 34 font-size: 18px; 35 line-height: 20px; 36 color: #666; 37 background: #eee; 38 } 39 #tab1:target, 40 #tab2:target, 41 #tab3:target { 42 /*用了这个就有层叠了*/ 43 z-index: 1; 44 }
通过切换 #tab 就产生了一个简单的tab栏
如再配合 transition 就可以做成动态的手风琴效果