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>1</span> <button class="www">提交</button> </div> </div> <div class="layui-tab-item"> <!-- 自由批阅 --> <div> <span>2</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 == 0) { console.log(‘日常设置‘); // searchCon(pageNum, pageSize,gradeId,subjectId); testSearch(); }else if(data.index == 1){ console.log(‘自由设置‘); getMarkingStatistics(); } }); /** *日常设置中的点击事件 */ $(‘.www,.www2‘).click(function() { layer.msg(11); }); /** *日常设置函数 */ function testSearch(){ console.log(‘我是日常设置‘) } /** *自由设置统计 */ function getMarkingStatistics(){ console.log(‘我是自由设置‘) } }); </script> </html>
原文：https://www.cnblogs.com/lvxisha/p/11649692.html