目录
1.左侧导航
2.导入数据表及无限级分类
3.实现左侧菜单后台代码
4.前端左侧菜单绑定
附录一：
附录二：判断选项卡是否已经打开
1.什么是Tab选项卡
2.Tab分类
附录一：什么是lay-filter
附录二：iframe
附录三：如何隐藏tab第一个选项卡的删除图标
附录四：首页tab选项卡及body样式处理
1.左侧导航
导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。
面包屑结构简单，支持自定义分隔符。
参考地址：/doc/element/nav.html
2.导入数据表及无限级分类
1) 数据导入请参考资料中的db.sql
2) 无限级分类：父亲找儿子的过程，将对应的儿子放在父亲下面，形成树结构。（递归算法）
3.实现左侧菜单后台代码
4.前端左侧菜单绑定
附录一：
<iframe frameborder="0" src="' + url+ '" scrolling="auto" style="width:100%;height:100%"></iframe>
附录二：判断选项卡是否已经打开
$(".layui-tab-title li[lay-id='" + name + "']").length > 0
1.什么是Tab选项卡
Tab广泛应用于Web页面，因此我们也对其进行了良好的支持（简约风格、卡片风格、响应式Tab以及带删除的Tab等等）。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。
2.Tab分类
参考地址：/doc/element/tab.html
2.1 Tab简约风格
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"><ul class="layui-tab-title"><li class="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><div class="layui-tab-content"></div></div>
2.2 Tab卡片风格
<div class="layui-tab layui-tab-card"><ul class="layui-tab-title"><li class="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><div class="layui-tab-content" style="height: 100px;"><div class="layui-tab-item layui-show">1</div><div class="layui-tab-item">2</div><div class="layui-tab-item">3</div><div class="layui-tab-item">4</div><div class="layui-tab-item">5</div><div class="layui-tab-item">6</div></div></div>
2.3 响应式Tab
当容器的宽度不足以显示全部的选项时，即会自动出现展开图标。
2.4 带删除的Tab
与默认相比没有什么特别的结构，就是多了个属性 lay-allowClose="true"
<div class="layui-tab" lay-allowClose="true"><ul class="layui-tab-title"><li class="layui-this">网站设置</li><li>用户基本管理</li><li>权限分配</li><li>全部历史商品管理文字长一点试试</li><li>订单管理</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">1</div><div class="layui-tab-item">2</div><div class="layui-tab-item">3</div><div class="layui-tab-item">4</div><div class="layui-tab-item">5</div><div class="layui-tab-item">6</div></div></div>
2.5 动态Tab
1）根据模块名称判断是否已经存在tab选项卡
$(".layui-tab-title li[lay-id='" + name + "']").length > 0
2）切换到指定选项卡
element.tabChange('tabs', name);
3）动态添加选项卡
// 新增一个Tab项element.tabAdd('tabs', {title : name,content : tabContent,id : name})// 切换刷新element.tabChange('tabs', name);注：tabs为tab选项卡的lay-filter=""<div class="layui-tab" lay-filter="tabs" lay-allowClose="true" style="margin:0px;">
附录一：什么是lay-filter
事件过滤器。你可能会在很多地方看到他，他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器
附录二：iframe
<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>
附录三：如何隐藏tab第一个选项卡的删除图标
<style>.layui-tab-title>li:first-child>i{display:none;}</style>
