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栏

<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">this is tab1 content</div>
    <div id="tab2" class="tab_content">this is tab2 content</div>
    <div id="tab3" class="tab_content">this is tab3 content</div>
</div>

  .tablist {
      position: relative;
      margin: 50px auto;
      min-height: 200px;
  }
  .tabmenu {
      position: absolute;
      /* 包含整个padding-box */
      top: 100%;
      margin: 0;
      padding: 1px 0 0 15px;
  }
  .tabmenu li {
      display: inline-block;
  }
  .tabmenu li a {
      text-decoration: none;
      display: block;
      padding: 5px 10px;
      margin: 0 10px 0 0;
      border: 1px solid #91a7b4;
      border-radius: 0 0 3px 3px;
      background: #e3f1f8;
      color: #333;
  }
  .tab_content {
      position: absolute;
      width: 600px;
      height: 170px;
      padding: 15px;
      border: 1px solid #91a8b4;
      border-radius: 3px;
      box-shadow: 0 2px 3px rgba(0,0,0,0.1);
      font-size: 18px;
      line-height: 20px;
      color: #666;
      background: #eee;
  }
  #tab1:target,
  #tab2:target,
  #tab3:target {
      /*用了这个就有层叠了*/
      z-index: 1;
  }

通过切换 #tab 就产生了一个简单的tab栏

如再配合 transition 就可以做成动态的手风琴效果