右侧采用了卡片格式：
代码如下：
html：
<body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div><iframe src="head.html" width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0"></iframe></div> <!--2.左侧导航--> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域（可配合layui已有的垂直导航） --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item leftdaohang" data-url="jiaose.html" mytitle="角色管理"><a>角色管理</a></li> <li class="layui-nav-item leftdaohang" data-url="zhanghao.html" mytitle="账号管理"><a>账号管理</a></li> </ul> </div> </div> <!--3.右侧主体内容区--> <div class="layui-body"> <!--tabs标签--> <div class="layui-tab layui-tab-brief" lay-filter="demo" lay-allowclose="true"> <ul class="layui-tab-title"> </ul> <div class="layui-tab-content"> </div> </div> </div> <!--4.底部固定区域--> <div class="layui-footer"> <!-- 底部固定区域 --> ©赵墨涵的数据共享平台 </div> </div>
js：
<script> layui.use('element', function() { var $ = layui.jquery, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块 //触发事件 var active = { tabAdd: function() { //新增一个Tab项 var htmlurl = $(this).attr('data-url'); var mytitle = $(this).attr('mytitle'); // alert("触发tab增加事件："+mytitle); //先判断是否已经有了tab var arrayObj = new Array(); //创建一个数组 $(".layui-tab-title").find('li').each(function() { var y = $(this).attr("lay-id"); arrayObj.push(y); }); // alert("遍历取到的数组："+arrayObj); var have = $.inArray(mytitle, arrayObj); //返回 3, if (have >= 0) { //tab已有标签 // alert("遍历的已有标签："+mytitle); element.tabChange('demo', mytitle); //切换到当前点击的页面 } else { //没有相同tab // alert("遍历的没有相同tab："+mytitle); element.tabAdd('demo', { title: mytitle //用于演示 , content: '<iframe style=" 100%;height:100%;" frameborder="0" scrolling="yes" src=' + htmlurl + ' ></iframe>', id: mytitle //实际使用一般是规定好的id，这里以时间戳模拟下 }) element.tabChange('demo', mytitle); //切换到当前点击的页面 FrameWH(); //计算框架高度 } } }; function FrameWH() { var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10; $("iframe").css("height", h + "px"); } $(window).resize(function() { FrameWH(); })
$(".leftdaohang").click(function() { var type = "tabAdd"; var othis = $(this); // var htmlurl=$(this).attr('data-url'); // var mytitle=$(this).attr('mytitle'); active[type] ? active[type].call(this, othis) : ''; }); }); </script>
标红的代码为解决
layui tab iframe 自适应高度
参考链接：https://blog.csdn.net/qq_28761593/article/details/105702609