Bootstrap

layui 后台管理系统tab切换 如何绑定某一个左侧导航为默认首页,点击时不会触发新标签

首先我们先看左侧栏

<li class="layui-nav-item layui-this">
		 <a href="javascript:;"  data-url="<%=basePath%>price/MarketQuotations" data-id='1' data-text="市场行情"><i class="iconfont">&#xe607;</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一致,这样才不会出现重复性标签

初始默认页

点击切换后的效果

;