首先我们先看左侧栏
<li class="layui-nav-item layui-this">
<a href="javascript:;" data-url="<%=basePath%>price/MarketQuotations" data-id='1' data-text="市场行情"><i class="iconfont"></i>市场行情</a>
</li>
你会发现layui有一个设定就是通过data-url跳转页面,data-text生成标签名,data-id防止生成重复页签
接下来我们看默认生成的iframe页
<!--主体内容-->
<div class="main-layout-body">
<!--tab 切换-->
<div class="layui-tab layui-tab-brief main-layout-tab" lay-filter="tab" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this welcome" lay-id='1'>市场行情</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show" style="background: #f5f5f5;">
<iframe src="<%=basePath%>price/MarketQuotations" width="100%" style="min-height:500px" height="100%" name="iframe" scrolling="auto" class="iframe" framborder="0"></iframe>
</div>
</div>
</div>
</div>
这一块我相信大家是差不多的写法,这里你会发现lay-id='1',才是关键。设定了这个之后你就会发现lay-id必须跟data-id一致,这样才不会出现重复性标签
初始默认页
点击切换后的效果