var element;var $;layui.use(['element','jquery'],function(){ element = layui.element, $ = layui.jquery; //监听左侧菜单点击 element.on('nav(left-menu)', function(elem){ alert(elem.context.attributes+"sss"); addTab(elem[0].innerText,elem[0].attributes[1].nodeValue,elem[0].id); }); //监听tab选项卡切换 element.on('tab(tab-switch)', function(data){ var id = data.elem.context.attributes[0].nodeValue; layui.each($(".layui-nav-child"), function () { $(this).find("dd").removeClass("layui-this"); }); $("#"+id).attr("class","layui-this"); });});/** * 新增tab选项卡，如果已经存在则打开已经存在的，不存在则新增 * @param tabTitle 选项卡标题名称 * @param tabUrl 选项卡链接的页面URL * @param tabId 选项卡id */function addTab(tabTitle,tabUrl,tabId){ if ($(".layui-tab-title li[lay-id=" + tabId + "]").length > 0) { element.tabChange('tab-switch', tabId); }else{ element.tabAdd('tab-switch', { title: tabTitle ,content: '' // 选项卡内容，支持传入html ,id: tabId //选项卡标题的lay-id属性值 }); element.tabChange('tab-switch', tabId); //切换到新增的tab上 }}/** * ifrme自适应页面高度，需要设定min-height * @param iframe */function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; if (iframeWin.document.body) { iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; } }}; 学习LayUI
页面效果：
