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">内容2div>
        <div class="layui-tab-item">内容3div>
        <div class="layui-tab-item">内容4div>
        <div class="layui-tab-item">内容5div>
    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页面

颜色

颜色自定义

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