layui后台框架，将左侧功能栏目集中到一个页面，通过上面的tab切换在iframe加载对应页面

原创

已于 2024-04-08 09:19:49 修改 · 627 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui #前端 #javascript

于 2024-04-08 09:19:20 首次发布

实现上面的功能效果。

1 html代码

<form class="layui-form layui-form-pane" action="">
        <div class="layui-tab" lay-filter="demo">
            <ul class="layui-tab-title">
                <li id="a0" class="layui-this">栏目1</li>
                <li>栏目2</li>
                <li>栏目3</li>
            </ul>
            <div class="layui-tab-content">
                <!-- 栏目1 -->
                <div class="layui-tab-item layui-show">
                    <iframe src="/pages1.html" frameborder="0" width="100%"
                        height="100%"></iframe>
                </div>
                <!-- 栏目2 -->
                <div class="layui-tab-item">
                    <iframe src="/pages2.html" frameborder="0" width