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

在很多情况下我们需要使用到历史浏览记录这一个功能，自己制作起来有点麻烦，但是layui的element模块给我们带来了不少的功能，这个模块就是Tab选项卡，例如以下的样式。

在宝鸡等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站制作、网站设计网站设计制作定制网站制作,公司网站建设,企业网站建设,成都品牌网站建设,全网整合营销推广,外贸营销网站建设,宝鸡网站建设费用合理。

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

这里是侧边导航样式的部分代码，id用于Tab的lay-id，Url_index是自定义属性，用来存放需要跳转到页面路径，span标签里的文本就是用于Tab的标题。


  组织结构
  部门管理
  员工管理
  用户管理

这一段是Tab的代码，ul就是存放选项卡标题的，每一个li标签就代表着一个选项，这里面已经有一个li标签，是存放首页的，因为需求需要不能删除首页，i标签存放的是删除的图标，可设定为display:none;隐藏掉。也可以不写当前的这个li直接点击侧边再生成选项。

下面的div是存放内容的我们需要在每一个内容里添加一个子页面进行存放我们点击后跳转到页面。

ဆ

另外需要声明一个存放已经生成选项卡的id的数组，这个数组要为全局变量，因为后面删除时还需要使用到。

var LiShiLiuLanJiLus = new Array();//保存历史浏览记录

下面是为侧边导航添加点击样式以及添加选项卡的操作。该个方法就是点击侧边导航的内容触发的。

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

添加点样式这一个我就不说了，每一个人的样式不一样，我是通过给他们添加一个我已经写好了的类，判断是否有这个类，如果有就移除，然后给当前点击到的这个标签添加该类名。

然后就是获取点击的需要的内容了，就是上面说的三个值。跳过某个页面，也就是说点击时该页面不用添加到选项卡中。

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

接着就用要使用到刚刚的数组了，用数组判断当前点击的内容是否已经添加到选项卡中。

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

判断如果state状态值为true即为可添加，然后就执行添加选项卡的代码。最后再切换一下选项卡即可。

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

切换选项卡时同时也要切换侧边导航的样式。

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

下面是删除的代码，删除选项卡的同时也要把存放选项卡数据的数组的相应内容删除掉。

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

这样一个历史记录就是完成了。

最后就是全部的js代码

var LiShiLiuLanJiLus = new Array();//保存历史浏览记录
var element;
$(function () {
 //===注意：选项卡 依赖 element 模块，否则无法进行功能性操作
 layui.use(['element'], function () {
   element = layui.element;
 
   //监听选项卡的切换事件
   element.on('tab(Tab_LiShiJiLu)', function (data) {
    //获取lay-id
    var lay_id = $(this).attr("lay-id");
    //为侧边导航添加样式
    if ($("ul.sub li span").hasClass("clickStyle")) {
     $("ul.sub li span.clickStyle").removeClass("clickStyle");
     $("#" + lay_id).addClass("clickStyle");
    }
   });
 
 });
 
 //===为侧边导航添加点击样式&&添加选项卡
 $("ul.sub li span").click(function () {
   //选中侧边导航，为其添加样式
   if ($("ul.sub li span").hasClass("clickStyle")) {
    $("ul.sub li span.clickStyle").removeClass("clickStyle");//清除上一个的样式
   }
   $(this).addClass("clickStyle");//为当前的span加上样式
 
   //获取相应的内容
   var thisOnclickTxt = $(this).text();//获取标题（用于选项卡的标题）
   var thisOnclickId = $(this).prop("id");//获取标签id值（用于选项卡的lay-id值）
   var thisOnclickUrl = $(this).attr("Url_index");//获取跳转到路径
   //跳过该页面
   if (thisOnclickTxt == "锁屏休息") {
    return;
   }
   if (thisOnclickTxt == "注销登陆") {
    return;
   }
 
   //判断是否要添加选项卡
   var state = true;//声明一个状态
   //循环数组内容
   for (var i = 0; i < LiShiLiuLanJiLus.length; i++) {
    //判断判断该选中内容是否存在数组内
    if (thisOnclickId == LiShiLiuLanJiLus[i]) {
     //存在，把状态值改为false
     state = false;
    }
   }
 
   if (state == true) {
    LiShiLiuLanJiLus.push(thisOnclickId);//向数组后面插入内容
    //添加选项
    element.tabAdd('Tab_LiShiJiLu', {//Tab_LiShiJiLu为lay-filter=""相对应的值
      title: thisOnclickTxt + 'ဆ',//标题
      content: '', //传如子页面
      id: thisOnclickId,//lay-id
     });
 
    }
 
    //切换选项卡
    element.tabChange('Tab_LiShiJiLu', thisOnclickId);
 
 });
});
 
 //删除选项卡
 function delTab() {
   $(".layui-tab").on("click", function (e) {
    if ($(e.target).is(".layui-tab-close")) {
     var deltab = $(e.target).parent().attr("lay-id");//输出哪个tab被点击，没有值时返回undefined
     element.tabDelete('Tab_LiShiJiLu', deltab); //删除 lay-id="xxx" 的这一项
 
     //循环数组内容
     for (var i = 0; i < LiShiLiuLanJiLus.length; i++) {
      if (deltab == LiShiLiuLanJiLus[i]) {
       LiShiLiuLanJiLus.splice(i, 1);//删除数组的一个元素，i为当前元素在数组内的位置
      }
     }
    }
   });
 }

以上这篇Layui选项卡制作历史浏览记录的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持创新互联。

本文名称：Layui选项卡制作历史浏览记录的方法
本文地址：http://cqcxhl.cn/article/jjghpd.html

重庆分公司，新征程启航

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

其他资讯