tab切换是常见的效果，为了方便经常使用插架中自带的，下面是layui中自带的tab切换效果，
主要代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layui--tab切换</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<!-- tab切换 -->
<div class="layui-tab layui-tab-card" lay-filter="demo">
<ul class="layui-tab-title">
<li class="layui-this">日常设置</li>
<li>自由设置</li>
</ul>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item layui-show">
<!-- 日常作业 -->
<div>
<span></span>
<button class="www">提交</button>
</div> </div>
<div class="layui-tab-item">
<!-- 自由批阅 -->
<div>
<span></span>
<button class="www2">提交</button>
</div> </div>
</div>
</div>
</body>
<script src="../js/jquery-2.1.0.js"></script>
<script src="../layui/layui.js"></script>
<script>
layui.use(['element','layer'], function(){
var element = layui.element,
layer = layui.layer; //一些事件监听
element.on('tab(demo)', function(data){
// console.log(data.index); //得到当前Tab的所在下标
if (data.index == ) {
console.log('日常设置');
// searchCon(pageNum, pageSize,gradeId,subjectId);
testSearch();
}else if(data.index == ){
console.log('自由设置');
getMarkingStatistics();
}
}); /**
*日常设置中的点击事件
*/
$('.www,.www2').click(function() {
layer.msg();
});
/**
*日常设置函数
*/
function testSearch(){
console.log('我是日常设置')
} /**
*自由设置统计
*/
function getMarkingStatistics(){
console.log('我是自由设置')
}
});
</script>
</html>