在很多情况下我们需要使用到历史浏览记录这一个功能,自己制作起来有点麻烦,但是layui的element模块给我们带来了不少的功能,这个模块就是Tab选项卡,例如以下的样式。
这里是侧边导航样式的部分代码,id用于Tab的lay-id,Url_index是自定义属性,用来存放需要跳转到页面路径,span标签里的文本就是用于Tab的标题。
<ul class="sub">
<li><span id="Organization" Url_index="/SystemManagement/SystemXX/ZZJG">组织结构</span></li>
<li><span id="Department" Url_index="/SystemManagement/SystemXX/BuMenGuanLi">部门管理</span></li>
<li><span id="Employee" Url_index="/SystemManagement/SystemXX/YuanGongGuanLi">员工管理</span></li>
<li><span id="User" Url_index="/SystemManagement/SystemXX/YongHuiGuanLi">用户管理</span></li>
</ul>
这一段是Tab的代码,ul就是存放选项卡标题的,每一个li标签就代表着一个选项,这里面已经有一个li标签,是存放首页的,因为需求需要不能删除首页,i标签存放的是删除的图标,可设定为display:none;隐藏掉。也可以不写当前的这个li直接点击侧边再生成选项。
下面的div是存放内容的我们需要在每一个内容里添加一个子页面进行存放我们点击后跳转到页面。
<div class="layui-tab" lay-filter="Tab_LiShiJiLu" lay-allowClose="true" style="background:#fff;">