Layui选项卡制作历史浏览记录

本文介绍了如何利用layui的element模块创建带有历史浏览记录功能的Tab选项卡。通过示例代码展示了如何设置侧边导航的样式、添加和删除选项卡,以及切换选项卡时同步侧边导航的状态。在实现过程中,使用全局数组存储已生成的选项卡ID,确保删除操作的准确性,并详细说明了各个关键步骤。
摘要由CSDN通过智能技术生成

    在很多情况下我们需要使用到历史浏览记录这一个功能,自己制作起来有点麻烦,但是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;">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值