一、body
html
复制代码
<!-- 导航栏 -->
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<ul id="nav" class="layui-nav layui-nav-tree" lay-filter="stock">
<li class="layui-nav-item layui-this"><a href="#wholeAnalysis" lay-id="wholeAnalysis">整体分析</a></li>
<li class="layui-nav-item"><a href="#bkAnalysis" lay-id="bkAnalysis">aaaa</a></li>
<li class="layui-nav-item"><a href="#gpAnalysis" lay-id="gpAnalysis">bbbb</a></li>
<li class="layui-nav-item"><a href="#bkChance" lay-id="bkChance">cccc</a></li>
<li class="layui-nav-item"><a href="#gpChance" lay-id="gpChance">dddd</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- tab页 -->
<div id="tab" class="layui-tab" lay-filter="stock" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="wholeAnalysis">整体分析</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<iframe id="wholeAnalysis" src="wholeAnalysis" frameborder="0" height="100%" width="100%"></iframe>
</div>
</div>
</div>
</div>
二、JS
javascript
复制代码
// 导航栏点击
element.on('nav(stock)', function (data) {
const layId = this.getAttribute('lay-id')
if (layId == null) {
return 0;
} else {
//判断是否存在tab
let exist = $("li[lay-id='" + layId + "']").length;
if (exist == 0) {
element.tabAdd('stock', {
title: this.innerHTML,
content: "<iframe id='" + layId + "' frameborder='0' src='" + layId + "' scrolling='auto' height='100%' width='100%'></iframe>",
id: layId
});
}
setIframeHeight(document.getElementById(layId));
element.tabChange('stock', layId);
}
});
// tab页点击
element.on('tab(stock)', function () {
let Len = $("#nav li a").length;
let targetIndex;
for (let i = 0; i < Len; i++) {
if ($(this).context.textContent == $("#nav li a")[i].outerText) {
//tab内容和垂直导航相等时，记录下序号
targetIndex = i;
}
}
// 更新layui-this样式类
$("#nav").find('.layui-this').removeClass('layui-this');
$("#nav li a").eq(targetIndex).parentsUntil("#nav").addClass("layui-this");
location.hash = this.getAttribute('lay-id');
});