css3制作tab效果:
思路如下:通过目标伪类选择器“E:target”,显示和隐藏不同栏目的内容,从而实现手风琴效果。
具体实现方法是,利用层关系将目标对象层叠在一起,然后通过伪类选择实现将需要表现的层设置为顶层。
html代码如下:
<div class="tabbed-area"> <div class="box-wrap"> <div id="box-three"> <ul class="tabs group"> <li><a href="#box-one">Tab1</a></li> <li><a href="#box-two">Tab2</a></li> <li><a href="#box-three" class="cur">Tab3</a></li> </ul> 3</div> <div id="box-two"> <ul class="tabs group"> <li><a href="#box-one">Tab1</a></li> <li><a href="#box-two" class="cur">Tab2</a></li> <li><a href="#box-three">Tab3</a></li> </ul> 2</div> <div id="box-one"> <ul class="tabs group"> <li><a href="#box-one" class="cur">Tab1</a></li> <li><a href="#box-two">Tab2</a></li> <li><a href="#box-three">Tab3</a></li> </ul> 1</div> </div> </div>
css代码如下:
*{ margin:0px; padding:0px; } .tabs{ list-style: none; position:absolute; top:-28px; left: 0px; } .tabs li a,.tabs li{ display: inline-block; } .tabs li a{ color:black; float: left; display: block; padding:4px 10px; margin-left: -1px; position:relative; left: 1px; text-decoration: none; background: -webkit-linear-gradient(top, white, #eee); background: -moz-linear-gradient(top, white, #eee); background: -ms-linear-gradient(top, white, #eee); background: -o-linear-gradient(top, white, #eee); } .tabs li a.cur{ background: #fff; } .tabs li a:hover{ background: #ccc; color:red; } .group:after{ visibility: hidden; display: block; font-size: 0; content:""; clear: both; height: 0; } .box-wrap{ position: relative; min-height: 150px; } .tabbed-area div div{ background: white; padding:20px; min-height: 150px; position:absolute; top:30px; left: 0px; width: 20%; } .tabbed-area div div, .tabs li a{ border:1px solid #ccc; } #box-one:target, #box-two:target, #box-three:target{ z-index: 1; }实现效果如下:
下一篇:css3制作手风琴效果
© hanhaisha.com. All Rights Reserved 湘ICP备15009704号-1
梦里不知岁月匆、梦醒不知韶华过