tab切换的两种方式

顾名思义首先引用jQuery.js了 
<script src="/UI/Scripts/jquery-1.11.3.min.js"></script>

1、第一种tab切换方式

//样式
#datalist {
  width:110px;
  height:650px;
  float:left;
  margin-left:2px;
  border:1px solid #ddd;
}
.department {
    text-align:center;
    height:40px;
    line-height:40px;
    border-bottom:1px solid #ddd;
    cursor: pointer;
}

.RigthList {
    width:calc(100% - 112px);
    height:650px;
    float:left;
    background: #fff;
}

.tabs{
   background:#5FB2DC;
   color:#fff;
}


//demo元素

<div class="panel panel-default" id="datalist">
     <div class="department" data-val="加班单">加班单</div>
     <div class="department" data-val="请假单">请假单 </div>
     <div class="department" data-val="出差单">出差单</div>
     <div class="department" data-val="签卡单">签卡单</div>
     <div class="department" data-val="调休单">调休单</div>
</div>
 <div class="panel panel-default RigthList"></div>

js

//点击选项卡tab
$(function () {
    tabs($("#datalist .department"), $('.RigthList .con'));
})

var tabs = function (tab, con) {
    tab.click(function () {
        var indx = tab.index(this);
        tab.removeClass('tabs');
        $(this).addClass('tabs'); //tab切换时颜色变换
        con.hide();
        con.eq(indx).show();
        IndexVal = $(this).attr('data-val');
       	console.log(IndexVal )
      	console.log(indx)
  	});
}

2、 第二种tab切换方式

//样式
.ULTab {
	display:inline-block;
}

.ULcontent{
    border:1px solid #ddd;
    height:32px;
    width:302px;
    margin: 0;
    padding: 0;
  
}
.ULcontent li{
    list-style:none;
    width:100px;
    height:30px;
    text-align:center;
    line-height:30px;
    float:left;
    cursor:pointer;
}
.contwentLI {
    background:#41C7DB;
    color:#fff;
}

//demo 元素

<div class="ULTab">
    <ul class="ULcontent" id="MashineSch">
       	<li data-value="CNC1" >1</li>
        <li data-value="CNC2">2</li>
        <li data-value="CNC3">3</li>
        <li data-value="CNC4">4</li>
    </ul>
</div>

js

 $(document).on('click', '#MashineSch li', function(){
  	$(this).addClass('contwentLI').siblings().removeClass('contwentLI');
  	var val=$(this).attr('data-value');
  	console.log(val)//根据val值获取对应的数据，也可以切换div，此处切换div我就不写，反正是根据自己的需求进行喽！
});