layui-PC后台管理界面利器-日常使用-持续更新

事件

选项卡事件

代码
list.html

<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" style="height: 100px;">
        <div class="layui-tab-item layui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</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>

list.js

layui.use('element', function () {// Tab事件
    var element = layui.element;

    element.on('tab(docDemoTabBrief)', function (data) {
        console.log(this); //当前Tab标题所在的原始DOM元素
        console.log(data.index); //得到当前Tab的所在下标
        console.log(data.elem); //得到当前的Tab大容器
    });
});

js需要注意了，element.on('tab(docDemoTabBrief)'对应html的lay-filter="docDemoTabBrief",否则不能工作.
选项卡里面嵌入独立html页面<iframe th:src="@{/test/xxx/xxx}" frameborder="0" width="100%" height="768px"></iframe>

颜色

颜色自定义

原颜色，对应代码class="layui-tab layui-tab-brief"