tab切换

/tab切换/

.tab-common {
    width: 100%;
    background-color: #25303c;
}
.tab-common .tab-nav {
    display: inline-block;
}
.tab-common .tab-nav li {
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    float: left;
}
.tab-common .tab-nav li.active, .tab-common .tab-nav li:hover {
    background-color: #1b6d85;
}
.tab-common .tab-contain {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}
.tab-common .tab-contain > div {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 300px;
}
.tab-common .tab-contain > div.active {
    left: 0;
}

// table切换

function tabCommen( target ) {
  var lis = target.find(".tab-nav > li");
  var tabs = target.find(".tab-contain > div");
  for( var i=0; i<lis.length; i++ ){
    $(lis[i]).attr("index",i);
    $(lis[i]).click(function(){
      for( var j=0; j<lis.length; j++ ){
        $(lis[j]).removeClass("active");
        $(tabs[j]).css("left","-100%");
      }
      $(this).addClass("active");
      $(tabs[$(this).attr("index")]).css("left","0");
    })
  }
}

html部分

<div class="tab-common" id="tab-common">
  <ul class="tab-nav clearfix">
    <li class="active">工单定位</li>
    <li>栅格渲染</li>
    <li>邻区信息</li>
  </ul>
  <div class="tab-contain">
    <div class="active">第一块</div>
    <div>第二块</div>
    <div>第三块</div>
  </div>
</div>