layui使用经验总结（一）——页面中加入子页面的两种方式

刺骨的言语ヽ痛彻心扉 2022-02-15 20:21 550阅读 0赞

## 一、通过iframe在页面中加入子页面 ##

点击菜单栏，改变或者再次请求路径

*  1.遍历菜单栏

<div class="layui-tab layui-tab-brief layui-tab-style" lay-filter="tabs">
    			<ul class="layui-tab-title f-b-n-b">
    			 <c:forEach items="${menuList }" var="menu" varStatus="index">
    			
    				<li  <c:if test="${index.index == 0 }">class="layui-this"</c:if> >
    					<table>
    						<tr >
    							<td>
    								<div class="title">${ menu.typeName }</div>
    							</td>
    						</tr>
    					</table>
    				</li>
    			</c:forEach>
    			</ul>
    		</div>
    	</div>

其中

<li  <c:if test="${index.index == 0 }">class="layui-this"</c:if> >

设置默认选中菜单栏

*  2、JavaScript代码

layui.use(['tabs','form'], function(){
    	var $ = layui.$,
    	tabs = layui.tabs,
    	form = layui.form;
    	
    	tabs.render({ // 切块导航
    		filter:"tabs",
    		callback:function(){
    			$('#modularpage').attr('src','${base}/home/menu.html');
    	});
    })
    }

## 二、通过div在页面加入子页面 ##

*  1.遍历菜单栏

<div class="layui-tab layui-tab-brief layui-tab-style" lay-filter="tabs">
    			<ul class="layui-tab-title f-b-n-b">
    			 <c:forEach items="${menuList }" var="menu" varStatus="index">
    			
    				<li  <c:if test="${index.index == 0 }">class="layui-this"</c:if> >
    					<table>
    						<tr >
    							<td>
    								<div class="title">${ menu.typeName }</div>		
    							</td>
    						</tr>
    					</table>
    				</li>
    			</c:forEach>
    			</ul>
    		</div>
    	</div>

其中

<li  <c:if test="${index.index == 0 }">class="layui-this"</c:if> >

设置默认选中菜单栏

*  2、div标签

*  3、JavaScript代码