前端——Layui的导航栏与tab页联动

一、body

<!--  导航栏  --><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

// 导航栏点击element.on('nav(stock)', function (data) {const layId = this.getAttribute('lay-id')if (layId == null) {return 0;} else {//判断是否存在tablet 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');});