成都IT培训学校

纯CSS3实现tab切换

2016-09-19 15:55 作者:浅吟轻唱 来源:简书 浏览: 我要评论(条) 字号:

摘要:CSS3伪类target 利用target的特性,可以实现纯css的tab效果切换 code如下 style type=text/css .tabmenu{ position:absolute; top:-28px; left:144px; margin:0px; } .tabmenu li{ display:inline-block; } .tabmenu li a{ display:block; padding:5px 10px;



  CSS3伪类target
 
  利用target的特性,可以实现纯css的tab效果切换
 
  code如下

  <style type="text/css">
 
  .tabmenu{
 
  position:absolute;
 
  top:-28px;
 
  left:144px;
 
  margin:0px;
 
  }
 
  .tabmenu li{
 
  display:inline-block;
 
  }
 
  .tabmenu li a{
 
  display:block;
 
  padding:5px 10px;
 
  margin:0 10px 0 0;
 
  border:1px solid #91a7b4;
 
  border-radius:5px 5px 0 0;
 
  background-color:#e3f1f8;
 
  color:#333;
 
  text-decoration: none;
 
  font-size:16px;
 
  }
 
  .tablist{
 
  position:relative;
 
  top:200px;
 
  margin:0 auto;
 
  width:600px;
 
  min-height:200px;
 
  }
 
  .tab_content{
 
  position:absolute;
 
  width:600px;
 
  height:170px;
 
  padding:15px;
 
  border:1px solid #91a7b4;
 
  border-radius:10px;
 
  box-shadow:0 2px 3px rgba(0,0,0,0,1);
 
  font-size:16px;
 
  line-height:16px;
 
  color:#666;
 
  background-color:#fff;
 
  }
 
  #tab1:target,#tab2:target,#tab3:target{
 
  z-index:1;
 
  }
 
  </style>
 
  <div class="tablist">
 
  <ul class="tabmenu">
 
  <li><a href="#tab1">tab1</a></li>
 
  <li><a href="#tab2">tab2</a></li>
 
  <li><a href="#tab3">tab3</a></li>
 
  </ul>
 
  <div id="tab1" class="tab_content">tab1</div>
 
  <div id="tab2" class="tab_content">tab2</div>
 
  <div id="tab3" class="tab_content">tab3</div>
 
  </div>

  效果图如下



  最关键的代码
 
  #tab1:target,#tab2:target,#tab3:target{
 
  z-index:1;
 
  }
 
  先根据target的特性锚链接到对应的div,再根据z-index的属性,改变div的层级关系,从而实现tab的切换效果!
 
  target兼容性
 
  最后提一下兼容性问题:因为这是CSS3新特性,所以不兼容老版本的浏览器,例如IE678……
 
 

顶一下
(0)
0%
踩一下
(0)
0%
标签:
版权所有: 非特殊声明均为本站原创文章,转载请注明出处: 成都学前端开发网-web.ixueyun.com
订阅更新: 您可以通过RSS订阅我们的内容更新

当前栏目分类