/**
 *css部分代碼
 */
<link rel="stylesheet" type="text/css" href="js/mon/UILab/layui2.4.5/css/layui.css" />

/**
 *html
 */
<div class="layui-tab" lay-filter="all">
<ul class="layui-tab-title">
  <li class="layui-this">網站設置</li>
  <li>用戶管理</li>
  <li>權限分配</li>
  <li>商品管理</li>
  <li>訂單管理</li>
</ul>
<div class="layui-tab-content">
  <div class="layui-tab-item layui-show">內容1</div>
  <div class="layui-tab-item">內容2</div>
  <div class="layui-tab-item">內容3</div>
  <div class="layui-tab-item">內容4</div>
  <div class="layui-tab-item">內容5</div>
</div>
</div>

/**
 *js
 */
<script type="text/javascript" src="js/mon/UILab/layui2.4.5/layui.js"></script>
<script>
layui.use('element', function(){
var $ = layui.jquery;
var element = layui.element; //Tab的切換功能，切換事件監聽等，需要依賴element模塊
element.on('tab(prev)', function(data){});
element.on('tab(all)', function(data){
  if(data.index == 0){
  console.log("內容1");
  } else if(data.index == 1){
  console.log("內容2");
  }  
});
});
</script>

<script>
//注意：選項卡 依賴 element 模塊，否則無法進行功能性操作
layui.use('element', function(){
var element = layui.element;
});
</script>