顾名思义首先引用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我就不写,反正是根据自己的需求进行喽!
});