一、通过iframe在页面中加入子页面
<iframe id="modularpage" name="modularpage" width="100%" height="90%" frameborder="0" scrolling="no" src="${base}/home/menu.html?nodeId=1">
</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标签
<div class="f-r f-bg-white f-p-l f-p-r f-p-t-sm f-p-b-sm f-webkit-box f-m-b" id="modular"></div>
- 3、JavaScript代码
<script>
$(function() {
Utils.fillDiv('modular', '${base}/modular.html');
});
layui.use(['tabs','form'], function(){
var $ = layui.$,
tabs = layui.tabs,
form = layui.form;
tabs.render({ //
filter:"tabs",
callback:function(){
Utils.fillDiv('modular', '${base}/modular.html');
}
});
})
</script>