基于bootstrap简洁有创意的点击切换Tabs选项卡特效

基于jquery和bootstrap，通过简单的十几行CSS代码，将原生的bootstrap选项卡进行美化，效果非常炫酷。

浏览器兼容

Chrome、 Opera、 Safari、Opera、IE9+

使用方法

1. 引入文件：

<linkhref="css/bootstrap.min.css"rel="stylesheet">
<scriptsrc="js/jquery.min.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>

2. html：

<div class="tab"role="tabpanel">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs"role="tablist">
      <li role="presentation" class="active"><ahref="#Section1" aria-controls="home" role="tab" data-toggle="tab">Section 1</a></li>
        <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li>
        <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">Section 3</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content tabs">
        <div role="tabpanel" class="tab-pane fade in active"id="Section1">
        <h3>Section 1</h3>
        <p>.......</p>
      </div>
      <div role="tabpanel" class="tab-pane fade"id="Section2">
        <h3>Section 2</h3>
        <p>......</p>
      </div>
      <div role="tabpanel" class="tab-pane fade"id="Section3">
        <h3>Section 3</h3>
        <p>.......</p>
        </div>
    </div>
</div>

3. CSS：

a:hover,a:focus{
  text-decoration:none;
  outline:none;
}
.tab .nav-tabs{
  border:none;
  border-bottom:2pxsolid#079fc9;
  margin:0;
}
.tab .nav-tabs li a{
  padding:10px20px;
  margin:010px-1px0;
  font-size:17px;
  font-weight:600;
  color:#293241;
  text-transform:uppercase;
  border:2pxsolid#e6e5e1;
  border-bottom:none;
  border-radius:5px5px00;
  z-index:1;
  position:relative;
  transition:all0.3s ease0s;
}
.tab .nav-tabs li a:hover,
.tab .nav-tabs li.active a{
  background:#fff;
  color:#079fc9;
  border:2pxsolid#079fc9;
  border-bottom-color:transparent;
}
.tab .nav-tabs li a:before{
  content:"";
  display:block;
  height:2px;
  background:#fff;
  position:absolute;
  bottom:-2px;
  left:0;
  right:0;
  transform: scaleX(0);
  transition:all0.3s ease-in-out0s;
}
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li a:hover:before{transform: scaleX(1); }
.tab .tab-content{
  padding:10px;
  font-size:17px;
  color:#6f6f6f;
  line-height:30px;
  letter-spacing:1px;
  position:relative;
}
@media onlyscreenand (max-width:479px){
  .tab .nav-tabs{border:none; }
  .tab .nav-tabs li{
    width:100%;
    text-align:center;
    margin-bottom:15px;
  }
  .tab .nav-tabs li a{
    margin:0;
    border-bottom:2pxsolidtransparent;
  }
  .tab .nav-tabs li a:before{
    content:"";
    width:100%;
    height:2px;
    background:#079fc9;
    position:absolute;
    bottom:-2px;
    left:0;
  }
}