每天學一點layui之Tab頁籤

layui官網對tab頁籤的介紹比較簡單

3個重要的樣式缺一不可：layui-tab layui-tab-title layui-tab-content

<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>
           

這是最基本的切換功能，如果想要更加靈活的運用好Tab選項，就必須要了解layui裡面的element子產品。

1. 首先給帶有layui-tab樣式的元素添加lay-filter屬性值，接下來就可以通過element對tab進行一系列的操作了；

2. element.tabAdd(filter, options);filter是lay-filter的值，options可以編輯内容和标題

   {

   id: //layui-tab-title清單中對應的lay-id的值

   ，titile://選項标題

   ,content: //内容區塊，可以是iframe

   }

3. element.tabDelete(filter, layid);删除指定（傳lay-id屬性值）Tab選項，這個沒什麼好說的
4. element.tabChange(filter, layid);切換到指定的Tab選項

前端html頁面layui下載下傳位址

div class="layui-side" >
    <div class=" layui-side-scroll">
        <!-- 左側導航區域（可配合layui已有的垂直導航） -->
        <ul class="layui-nav layui-nav-tree"  lay-filter="test" style="background-color:#FFFFFF;">
            <li class="layui-nav-item" style="background-color: #3A5C82;">
                <a class="" href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >清單1</a>
                <dl class="layui-nav-child">

                    <dd><a href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  id="menu_three">清單1-1</a>
                        <ol class="layui-nav-child"  >

                            <li style="background-color: #3A5C82;">
                                <!-- 菜單欄的資料一般需要從背景擷取-->
                                <a class="site-tab-active" data-id="1" data-title="清單1-1-1" data-url="menu1.html">清單1-1-1</a>
                                <a class="site-tab-active" data-id="2" data-title="清單1-1-2" data-url="menu2.html">清單1-1-2</a>
                                <a class="site-tab-active" data-id="3" data-title="清單1-1-3" data-url="menu3.html">清單1-1-3</a>
                            </li>
                        </ol>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>
</div>
<div class="page-content">
    <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="true">
        <ul class="layui-tab-title">
        </ul>
        <ul class="rightmenu" style="position: absolute;display: none;font-size: 12px;font-family: 'Microsoft Yahei';">
            <li data-type="closethis">關閉目前</li>
            <li data-type="closeall">關閉所有</li>
        </ul>
        <div class="layui-tab-content">
        </div>
    </div>
</div>
           

js代碼

layui.use(['element','jquery'], function(){
        var element = layui.element,$=layui.jquery;
        //當點選有site-tab-active屬性的标簽時，即左側菜單欄（可以是無限菜單欄）中内容 ，觸發點選事件
        $('.site-tab-active').on('click', function() {
            var dataid = $(this);
            //這時會判斷右側.layui-tab-title屬性下的有lay-id屬性的li的數目，即已經打開的tab項數目
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                //如果比零小，則直接打開新的tab項
                element.tabAdd('xbs_tab',{
                    title:dataid.attr("data-title"),
                    content:'<iframe data-frameid="'+dataid.attr("data-id")+'" scrolling="auto" frame src="'+dataid.attr("data-url")+'" style="width:100%;height:99%;"></iframe>',
                    id:dataid.attr("data-id")
                })
            } else {
                //否則判斷該tab項是否以及存在
                var isData = false; //初始化一個标志，為false說明未打開該tab項 為true則說明已有
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    //如果點選左側菜單欄所傳入的id 在右側tab項中的lay-id屬性可以找到，則說明該tab項已經打開
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                    }
                })
                if (isData == false) {
                    //标志為false 新增一個tab項
                    element.tabAdd('xbs_tab',{
                        title:dataid.attr("data-title"),
                        content:'<iframe data-frameid="'+dataid.attr("data-id")+'" scrolling="auto" frame src="'+dataid.attr("data-url")+'" style="width:100%;height:99%;"></iframe>',
                        id:dataid.attr("data-id")
                    })
                }
            }
            //最後不管是否新增tab，最後都轉到要打開的選項頁面上
            element.tabChange('xbs_tab',dataid.attr('data-id'))
        });
    })