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>