瀚海沙

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;
  }