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

最新推荐文章于 2025-09-11 02:22:04 发布

原创最新推荐文章于 2025-09-11 02:22:04 发布 · 768 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui #传统前端界面技术 #pc端管理后台开发

工作遇到的问题专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何使用layui框架实现选项卡切换事件监听及颜色自定义，通过实例展示了如何在HTML中设置选项卡，并在JS中使用element模块监听tab事件，同时探讨了在选项卡中嵌入独立HTML页面的方法。

文章目录

事件

选项卡事件

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