layui選項卡總結

選項容器的類名是class="layui-tab" 選項的類名class="layui-tab-title"

選項內容容器的類名是class="layui-tab-content"選項內容的類名class="layui-tab-item layui-show"

layui-show是預設顯示的選項內容

<div class="layui-tab">
  <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>
 
<script>
//注意：選項卡 依賴 element 模組，否則無法進行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>
      
 

PS 通過追加class：layui-tab-brief 來設定簡潔風格。
值得注意的是，如果存在 layui-tab-item 的內容區域，在切換時自動定位到對應內容。如果不存在內容區域，則不會定位到對應內容。你通常需要設定過濾器，通過 element模組的監聽tab事件來進行切換操作。詳見文件左側【內建元件 - 基本元素操作 element】

PS 通過追加class：layui-tab-card來設定卡片風格

PS 可以對父層容器設定屬性 lay-allowClose="true" 來允許Tab選項卡被刪除

PS 通過對選項卡設定屬性 lay-id="xxx"