本文介绍如何利用Layui的element模块实现Tab选项卡的历史浏览记录功能。通过侧边导航点击触发，动态生成Tab并保存ID到全局数组，实现重复点击不重复添加、切换同步样式、删除Tab及清理数组数据等完整交互逻辑，提供核心JS代码参考。
Layui选项卡历史浏览记录实现概述
在许多应用场景中，实现历史浏览记录功能往往较为繁琐。借助Layui框架中的element模块提供的Tab选项卡功能，可以简化这一开发过程，实现如下所示的界面效果。
侧边导航与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标签代表一个独立的选项。初始状态下已包含一个首页选项，因业务需求需保留该首页且不可删除，其对应的删除图标i标签可通过设置display:none进行隐藏。若无需固定首页，也可在点击侧边导航时直接生成新的选项卡。
用于承载内容区域的div元素中，需嵌入子页面iframe，以展示点击侧边导航后跳转的具体页面内容。
<div class="layui-tab" lay-filter="Tab_LiShiJiLu" lay-allowClose="true" style="background:#fff;">
<ul class="layui-tab-title" id="deleteSpan" style="margin:0px 40px 0px 40px;left:0px">
<li class="layui-this" lay-id="HomePage" id="positionLeft">
<img src="~/Content/img/3Dpng/png-0060.png" style="width:20px;height:20px;margin-bottom:5px;" />
<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="padding:0px;">
<div class="layui-tab-item layui-show">
<iframe id="content" scrolling="auto" style="height:630px;" src="/Main/HomePage"></iframe>
</div>
</div>
</div>全局数组与数据管理
此外，需声明一个全局数组变量，用于存储已生成的选项卡ID，以便后续执行删除操作时能够准确定位并移除对应数据。
var LiShiLiuLanJiLus = new Array();//保存历史浏览记录
点击交互与选项卡动态添加
接下来实现侧边导航的点击样式切换及选项卡添加逻辑，该方法由侧边导航内容的点击事件触发。
关于点击样式的处理，具体实现因项目样式而异。此处通过判断目标元素是否已拥有预设的类名，若存在则移除该类名，否则为当前点击的元素添加该类名，以此实现样式的切换。
随后获取点击事件所需的三个关键值：lay-id、Url_index及标题。在此逻辑中，可设置跳过某些页面的逻辑，即特定页面点击时不将其添加到选项卡列表中。
接着利用前述的全局数组进行判断，检查当前点击的内容是否已存在于历史浏览记录中。
若判断状态state为true，表示该页面可被添加，则执行添加选项卡的代码逻辑，最后调用切换选项卡的方法完成界面更新。
在切换选项卡的同时，需同步更新侧边导航中对应项的选中样式，以保持界面状态的一致性。
选项卡删除与数据同步
删除功能的实现代码如下，在移除选项卡的同时，必须同步从存放选项卡数据的数组中移除相应的ID记录，确保数据与界面同步。
通过上述步骤，历史浏览记录功能即告完成。
以下是完整的JavaScript代码实现。
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 + '<i class="layui-icon layui-unselect layui-tab-close" οnclick="delTab()">ဆ</i>',//标题
content: '<iframe id="content" scrolling="auto" style="height:630px;" src="' + thisOnclickUrl + '"></iframe>', //传如子页面
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选项卡制作历史浏览记录的方法即为全部内容分享，希望能为读者提供参考，欢迎继续支持本站。