【Layui】05 选项卡 Tabs

文档位置：

https://www.layui.com/doc/element/tab.html

案例演示：

<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(){
        let element = layui.element;
    });
</script>

每一个选项卡对应了一个内容（div标签）：

【选项卡风格】

1、默认风格
2、卡片风格
3、简洁风格

默认风格属性：

layui-tabs

简洁风格属性：

layui-tabs layui-tab-brief

卡片风格属性：

layui-tabs layui-tab-card

简洁风格案例：

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <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>
</div>

卡片风格案例：

<div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content" style="height: 100px;">
    <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 class="layui-tab-item">6</div>
  </div>
</div>

【相关样式】

选项卡属性：

layui-tab

选项卡标题属性，即卡片头：

layui-tab-title

启用选中状态属性：

layui-this

选项卡内容的展示容器：

layui-tab-content

选项卡对应需要展示的选项：

layui-tab-item

设置默认显示的选项：

layui-show

特殊属性：是否启用关闭按钮

默认不写就是false

lay-allowclose="true"

演示案例：

<div class="layui-tab layui-tab-card" lay-allowclose="true">
    <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li>订单管理</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <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 class="layui-tab-item">6</div>
    </div>
</div>

代替选择器的过滤属性：

lay-filter="值"

对选项卡的CRUD：

<div class="layui-tab layui-tab-card" lay-allowclose="true" lay-filter="abc">
    <ul class="layui-tab-title">
        <li lay-id="1" class="marked-tab">网站设置</li>
        <li lay-id="2" class="marked-tab">用户管理</li>
        <li lay-id="3" class="marked-tab">权限分配</li>
        <li lay-id="4" class="marked-tab">商品管理</li>
        <li lay-id="5" class="marked-tab">订单管理</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <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 class="layui-tab-item">6</div>
    </div>
</div>

<br>

<div>
    <div class="layui-btn-group" >
        <button type="button" class="layui-btn" id="addc">增加一个选项</button>
        <button type="button" class="layui-btn" id="change">切换用户管理</button>
        <button type="button" class="layui-btn" id="delete">删除商品管理信息</button>
        <button type="button" class="layui-btn" id="deleteAll">删除所有选项</button>
    </div>
</div>

<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    // layui.use('element', function(){
    //     let element = layui.element;
    // });

    layui.use(['element','jquery'], function(){
        let element = layui.element;
        let $ = layui.jquery;


        // 新增一个选项卡
        $("#addc").click(function () {
            element.tabAdd('abc', {
               title : "这是增加出来的选项",
               content : "选项卡内容"
            });
        });

        // 改变选中状态
        $("#change").click(function () {
            element.tabChange('abc', '2');
        });

        // 删除指定的选项卡
        $("#delete").click(function () {
            element.tabDelete('abc','4');
        });

        // 删除所有
        $("#deleteAll").click(function () {
            let tabList = $(".marked-tab");

            $.each(tabList, function (index, item) {
                let lay_id = item.getAttribute('lay-id');
                element.tabDelete('abc',lay_id);
            });

            // for (let i = 0; i < tabList.length; i++);
        });
    });
</script>