一、界面效果:
参考官方文档添加组件即可:
https://www.layui.com/demo/admin.html
另外参考layuiadmin的demo:https://www.layui.com/admin/
二、功能一:点击左侧菜单,右侧tab栏添加对应的标签和内容,并可以嵌入iframe
利用lay-filter属性,将左侧菜单组件和tab组件关联。
(1)左侧菜单栏代码:
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">菜单按钮管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" id="11">列表一</a></dd>
<dd><a href="javascript:;" id="12">列表二</a></dd>
</dl>
</li>
</ul>
(2)tab标签代码
<div class="layui-body">
<div class="layui-tab" lay-allowClose="true" lay-filter="demo">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="111">文章列表</li>
</ul>
<div class="layui-tab-cont