右側采用了卡片格式：
代碼如下：
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="width: 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