每天学一点layui之Tab选项卡

layui官网对tab选项卡的介绍比较简单
3个重要的样式缺一不可：layui-tab layui-tab-title layui-tab-content

  

    
网站设置
    
用户管理
    
权限分配
    
商品管理
    
订单管理
  
  

    
内容1
    
内容2
    
内容3
    
内容4
    
内容5
  

 

这是最基本的切换功能，如果想要更加灵活的运用好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" >
    

        
        

            

                列表1
                


                    
列表1-1
                        


                            

                                
                                列表1-1-1
                                列表1-1-2
                                列表1-1-3
                            
                        
                    
                
            
        
    

• 关闭当前
• 关闭所有

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:'',
                    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:'',
                        id:dataid.attr("data-id")
                    })
                }
            }
            //最后不管是否新增tab，最后都转到要打开的选项页面上
            element.tabChange('xbs_tab',dataid.attr('data-id'))
        });
    })