在我的项目需要中关上的模块页面总是在一个总视图中去显示，其实在用户体验中不算太好，因为用户在A页面操作时可能须要同时去查看B页面，并且在切换页面的时候页面会进行从新加载，比拟耗时、耗性能。所以在页面比拟多的零碎中实现多页签模式的体验还是比拟好的。那么在传统的layui+jq我的项目中，如何实现有限页签tab式关上页面呢？废话不多说，当初就开始撸代码。
首先监听菜单按钮在点击时应用layui的element去动静增加tab（减少tab的时候先删除对应已存在的tab，避免反复），并且在tab中退出iframe（高度主动撑大），iframe中的reportName是对应页面所在的文件夹名同时也是菜单按钮的id，是一一对应的关系：
var element = layui.element; $(".report-list > ul li").on("click", function () { //事件代理点击 var crrentTabName = $(".layui-tab.active").attr("lay-filter"); var reportName = $(this).data("id"); //点击后新增tab element.tabDelete(crrentTabName, reportName); element.tabAdd(crrentTabName, { title: $(this).find(".title").text(), content: '<iframe id="Iframe" src="./' + reportName + '/index.html" width="100%" height="' + ($(".body-main").height() - 50) + '" scrolling="no" marginheight="0" marginwidth="0"></iframe>', //反对传入html id: reportName, }); element.tabChange(crrentTabName, reportName);而后是须要对右边菜单做一个选中成果（用户晓得以后在哪个菜单）和一个折叠（用户能够更宽的查看内容）
应用本地存储记录以后所处的菜单，再次进入后就会默认跳转到这个菜单，如果初始进来默认第一个，这里是UserManage
残缺js代码
menu.js
layui.use(["element", "layer"], function () { var element = layui.element; $(".report-list > ul li").on("click", function () { //事件代理点击 var crrentTabName = $(".layui-tab.active").attr("lay-filter"); var reportName = $(this).data("id"); //点击后新增tab element.tabDelete(crrentTabName, reportName); element.tabAdd(crrentTabName, { title: $(this).find(".title").text(), content: '<iframe id="Iframe" src="./' + reportName + '/index.html" width="100%" height="' + ($(".body-main").height() - 50) + '" scrolling="no" marginheight="0" marginwidth="0"></iframe>', //反对传入html id: reportName, }); element.tabChange(crrentTabName, reportName); console.log($(".body-main").height()); // $("#Iframe").height(); });});$(function () { //左侧导航点击高亮 var $nav_item = $(".layui-nav-tree > .layui-nav-item"); $nav_item.click(function () { $nav_item.removeClass("layui-this"); $(this).addClass("layui-this"); }); changeTab = function (tabid) { //菜单选中成果 $(".layui-tab").removeClass("active"); $('[lay-filter="' + tabid + '"]').addClass("active"); sessionStorage.setItem("className", tabid); // var ss = window.location.href.indexOf("/html/"); // var aa = window.location.href.substr(0, ss + 6); // url = aa + url; // document.getElementById("Iframe").src = url; // alert($(".body-main").height()); // $(".layui-tab-content").height($(".body-main").height()); }; //菜单折叠按钮成果 $(".left-button").click(function () { if ($(this).hasClass("layui-icon-left")) { $(this).removeClass("layui-icon-left").addClass("layui-icon-right"); $(".body-left").hide(); $(".body-main").css("width", "100%"); } else { $(this).removeClass("layui-icon-right").addClass("layui-icon-left"); $(".body-left").show(); $(".body-main").css("width", "calc(100% - 230px)"); } }); window.changeUrl = function (url, className) { console.log(className); console.log(url); //匹配url第一个门路字符用于在一级菜单高亮 $("#main-menu > li").removeClass("selected"); $("#main-menu > ." + url.split("/")[0] + "_1").addClass("selected"); // sessionStorage.setItem("url", url); sessionStorage.setItem("className", className); var ss = window.location.href.indexOf("/html/"); var aa = window.location.href.substr(0, ss + 6); url = aa + url.split("/")[0]; console.log(url); document.getElementById("Iframe") && (document.getElementById("Iframe").src = url + "/" + className + "/index.html"); }; if ( sessionStorage.getItem("className") !== "null" && $("." + sessionStorage.getItem("className")).length > 0 ) {//记忆上次停留菜单 $("." + sessionStorage.getItem("className")).addClass("layui-this"); if (sessionStorage.getItem("url")) { changeUrl( sessionStorage.getItem("url"), sessionStorage.getItem("className") ); } } else { changeUrl(sessionStorage.getItem("url"), "UserManage"); //如上次菜单不匹配则默认第一个选中 $(".layui-nav > .layui-nav-item:first-child").addClass("layui-this"); } });上面是html构造，应用的是layui的导航组件，右侧就默认展现一个菜单（无奈敞开的列表tab）
<body> <div class="body-left"> <div class="left-nav"> <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="left-nav" style="margin-right: 10px;"> <li class="layui-nav-item workOrderTab "><a href="#" onclick="changeTab('workOrderTab')">报表1</a></li> <li class="layui-nav-item callCenterTab"><a href="#" onclick="changeTab('callCenterTab')">报表2</a></li> </ul> </div> </div> <div class="left-button layui-icon layui-icon-left" ></div> <div class="body-main"><div class="layui-tab active" lay-filter="workOrderTab" lay-allowClose="true" > <ul class="layui-tab-title"> <li class="layui-this" lay-id="default">报表</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <div class="report-list"> <ul> <li data-id='WorkOrderDetail'> <div class="item" > <div class="title">报表1</div> <div class="desc">一个形容</div> </div> </li> <li data-id='WorkOrderSource' > <div class="item"> <div class="title">报表yyyy</div> <div class="desc">一个形容</div> </div> </li> <li data-id='WorkOrderClassify' > <div class="item"> <div class="title">分类报表</div> <div class="desc">一个形容</div> </div> </li> </ul> </div> </div></div> </div><div class="layui-tab" lay-filter="callCenterTab" lay-allowClose="true" > <ul class="layui-tab-title"> <li class="layui-this" lay-id="default"> 报表222</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <div class="report-list"> <ul> <li data-id='callCenterConnectionRate'> <div class="item" > <div class="title">报表xxx</div> <div class="desc">展现不同的报表</div> </div> </li> <li data-id='CallRecordsData'> <div class="item" > <div class="title">记录详情</div> <div class="desc">展现不同条件下的报表</div> </div> </li> <li data-id='AfterSaleTimeRate'> <div class="item" > <div class="title">状态</div> <div class="desc">报表形容</div> </div> </li> </ul> </div> </div></div> </div></body>css局部:
body{ padding: 0; } .out{ display: none; } .body-main{ width: 100%; height: 100%; } .body-main iframe { background-color: #fff; border: 0px; } .left-nav{ background: #fff; } .layui-nav .layui-nav-item a{ background: transparent; color: #3b3a3a; } .layui-nav{ background: #fbfbfb00; } .layui-nav-tree .layui-nav-item a:hover{ background-color: #297acc; } .layui-nav-tree .layui-this a{ background-color: #297acc !important; color:#fff ; } .body-left{ width: 200px; overflow-x: hidden; border-right: 10px solid #eaf4ff; }.body-main{width: calc(100% - 230px);float: left;}.layui-tab{ display: none; } .layui-tab.active{ display: block; } .headTab.layui-tab-title .layui-this { color: #3193f5;}.layui-tab {margin: 0;}.left-button { text-align: center; left:180px; top: calc(50% - 40px); color: #fff; width: 20px; height: 40px; background: rgba(90, 169, 247, .9); border-radius: 4px 0 0 4px; line-height: 40px; position: absolute; cursor: pointer; z-index: 99;}.left-button.layui-icon-right{ left: 0; border-radius: 0px 4px 4px 0px;}.menu-authority-control{ display: none; } .layui-tab-title>li:first-child .layui-tab-close { display: none;} .report-list{ padding: 20px; } .report-list > ul > li{ cursor: pointer; margin-bottom: 30px; } .report-list ul li:hover div .title { color: rgb(49, 147, 245);} .item >.title{ font-size: 16px; margin-bottom: 6px; border-bottom: 1px solid #e6e6e6; display: inline-block; padding-bottom: 2px; } .item >.desc{font-size: 12px;line-height: 20px; }.layui-tab-content{ overflow-y: auto;}