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

zhang123csdn

已于 2024-04-08 09:19:49 修改

阅读量557

点赞数 1

文章标签： layui 前端 javascript

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

本文链接：https://blog.youkuaiyun.com/zhang123csdn/article/details/137491244

版权

文章介绍了如何在HTML中使用layui框架构建一个带有多个可切换栏目的表格，并解决IFrame的高度自适应问题。通过嵌入不同的`/pages`页面，展示了如何通过CSS样式调整每个栏目的IFrame高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现上面的功能效果。

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>