很多时候需要用到历史浏览记录的功能，自己制作有点麻烦。但是，layui的元素模块给我们带来了很多功能。此模块是选项卡选项卡，如以下样式。

这是侧面导航样式的部分代码。id用于Tab的lay-id，Url_index是用户定义的属性，用于存储跳转到页面的路径，span标签中的文本是Tab的标题。

ul class=' sub ' lispan id=' organization ' URL _ index='/System management/System xx/zzjg '组织结构/span/Li lispan id=' department ' URL _ index='/System management/SystemXX/BuMenGuanLi '部门管理/span/Li lispan id=' employee ' URL _ index='/System management/System/System xx/System xx/System xx/yuongguanli '员工管理/span/Li lispan id=' user ' URL _ index='/System management/System xx/yonguiguanli '用户管理/span/Li每个li标签代表一个选项。里面已经有一个li标签，用来存储首页，因为需求要求首页不能删除，I标签存储删除的图标，可以设置为display:none藏起来。您也可以在不写入当前li的情况下单击侧面重新生成选项。

下面的div用于存储内容。我们需要为每个内容添加一个子页面进行存储。点击后，我们跳转到页面。

div class=' layui-Tab ' lay-filter=' Tab _ lishijlu ' lay-allowClose=' true ' style=' background : # fff；'ul class=' layui-tab-title ' id=' delete span ' style=' margin :0 px 40px 0px 40px；left :0 px ' Li class=' layui-this ' lay-id=' home page ' id=' positionLeft ' img src=' http : ~/Content/img/3d png/png-0060 . png ' style=' width :20 px；高度：20 px；边距-bottom :5 px；'/I class=' layui-icon layui-unselect layui-tab-close ' style=' display : none；'nclick='deltab()'/i/Li/ul div class=' layui-tab-content ' id=' tab _ size ' style=' padd :0 px；'div class=' layui-tab-item layui-show ' iframe id=' content ' scrolling=' auto ' style=' height :630 px；'src=' http :/main/home page '/iframe/div/div/div。此外，还需要声明一个数组来存储生成的标签的id。这个数组应该是一个全局变量，因为它需要在以后删除时使用。

var LishiliUlanjilus=new Array()；//保存历史浏览记录

以下是如何为侧面导航添加点击样式和标签。此方法通过单击侧面导航的内容来触发。

我就不说增加一些风格了。每个人的风格都不一样。我添加一个我写给他们的类，判断是否有这样的类，如果有就去掉，然后将类名添加到当前点击的标签中。

那么就要得到点击的内容，也就是上面三个值。跳过一个页面，这意味着点击时不必添加到标签页。

然后使用刚才使用的数组，用数组判断当前点击的内容是否已经添加到标签页。

判断如果状态值为真，则可以添加，然后执行添加制表符的代码。最后，再次切换选项卡。

切换选项卡时，还应该切换侧面导航的样式。

以下是删除代码。删除选项卡时，还应该删除存储选项卡数据的数组的相应内容。

这样的历史记录就完成了。

最后，还有所有的js代码

var LishiliUlanjilus=new Array()；//保存历史浏览记录定义变量元素；$(function () { //==注意：选项卡依赖元素模块，否则无法进行功能性操作layui.use(['element']，function(){ element=layui。元素；//监听选项卡的切换事件元素。on(' Tab(Tab _ lishiglu)')，function (data) { //获取lay-id var lay_id=$(this).attr(' lay-id ')；//为侧边导航添加样式if ($('ul.sub li span ').hasClass(')单击样式){ $('ul.sub li span。单击样式')。移除类("单击样式");$("#"lay _ id).添加类别("单击样式");} });});//===为侧边导航添加点击样式添加选项卡$('ul.sub li span ').单击(函数(){ //选中侧边导航，为其添加样式if ($('ul.sub li span ').hasClass(')单击样式){ $('ul.sub li span。单击样式')。移除类("单击样式");//清除上一个的样式} $(这个)。添加类别("单击样式");//为当前的跨度加上样式//获取相应的内容var this onktxt=$(this).text()；//获取标题（用于选项卡的标题)var硫clickid=$(this).道具(“id”)；//获取标签编号值（用于选项卡的层编号值)var硫clickurl=$(this).attr(' URl _ index ')；//获取跳转到路径//跳过该页面if(this click txt=='锁屏休息){ return} if(硫clicktxt=='注销登陆){ return} //判断是否要添加选项卡定义变量状态=真；//声明一个状态//循环数组内容for(var I=0；我厉士柳兰吉鲁；i ) { //判断判断该选中内容是否存在数组内if(硫clickid==lisiliulajilus[I]){//存在，把状态值改为假状态=假；} } if(state==true){ lisiliulangijlus。push(硫click id)；//向数组后面插入内容//添加选项元素。tabadd(' Tab _ lishiglu '，{//Tab _ lishiglu为lay-filter=' '相对应的值title : this clicktxt ' I class=' layui-icon layui-unselect layui-tab-close ' nclick='deltab()'/i',//标题content : ' iframe id=' content ' scrolling=' auto ' style=' height :630 px；src=' http : '硫点击url ' '/iframe '，//传如子页面id: thisOnclickId，//lay-id })；} //切换选项卡元素。tabchange(' Tab _ lishijlu '，this click id)；});});//删除选项卡函数delTab() { $(' .layui-tab ').打开('点击')，函数{ if($(e . target)} .是('。layui-tab-close '){ var deltab=$(e . target).父项()。attr(' lay-id ')；//输出哪个标签被点击，没有值时返回未定义的元素。制表符删除(' Tab _ LishLiu '，deltab)；//删除lay-id='xxx '的这一项//循环数组内容for(var I=0；我厉士柳兰吉鲁；I){ if(deltab==lisiliulajilus[I]){ lisiliulajilus。拼接(，1)；//删除数组的一个元素，我为当前元素在数组内的位置} } } });}以上这篇获得选项卡制作历史浏览记录的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。