在很多情况下我们需要使用到历史浏览记录这一个功能,自己制作起来有点麻烦,但是layui的元素模块给我们带来了不少的功能,这个模块就是标签选项卡,例如以下的样式。
这里是侧边导航样式的部分代码,id用于标签的lay-id, Url_index是自定义属性,用来存放需要跳转到页面路径,内标签里的文本就是用于标签的标题。
& lt; ul类="子"比;
& lt; li> & lt;跨度id="组织" Url_index="/体系管理/SystemXX各国“祝辞组织结构& lt;/span> & lt;/li>
& lt; li> & lt;跨度id="部门" Url_index="/体系管理/SystemXX/BuMenGuanLi”祝辞部门管理& lt;/span> & lt;/li>
& lt; li> & lt;跨度id="员工" Url_index="/体系管理/SystemXX/YuanGongGuanLi”祝辞员工管理& lt;/span> & lt;/li>
& lt; li> & lt;跨度id="用户" Url_index="/体系管理/SystemXX/YongHuiGuanLi”在用户管理& lt;/span> & lt;/li>
& lt;/ul>
这一段是标签的代码,ul就是存放选项卡标题的,每一个李标签就代表着一个选项,这里面已经有一个李标签,是存放首页的,因为需求需要不能删除首页,我标签存放的是删除的图标,可设定为显示:没有;隐藏掉。也可以不写当前的这个李直接点击侧边再生成选项。
下面的div是存放内容的我们需要在每一个内容里添加一个子页面进行存放我们点击后跳转到页面。
& lt; div类=" layui-tab " lay-filter=癟ab_LiShiJiLu”lay-allowClose=" true "比;
& lt; ul类=" layui-tab-title " id=癲eleteSpan”比;
& lt;李类=" layui-this " lay-id="主页" id=皃ositionLeft”比;
& lt; img src=" https://www.yisu.com/zixun/~/内容/img/3 dpng/png - 0060. png”/比;
& lt;我class=" layui-icon layui-unselect layui-tab-close”οnclick=癲elTab()“祝辞& # 4102;& lt;/i>
& lt;/li>
& lt;/ul>
& lt; div类=" layui-tab-content " id=皌ab_Size”比;
& lt; div class=" layui-tab-item layui-show”比;
滚动& lt; iframe id=澳谌荨?白远眘rc=" https://www.yisu.com/Main/HomePage "祝辞& lt;/iframe>
& lt;/div>
& lt;/div>
& lt;/div>
另外需要声明一个存放已经生成选项卡的id的数组,这个数组要为全局变量,因为后面删除时还需要使用到。
var LiShiLiuLanJiLus=new Array();//保存历史浏览记录
下面是为侧边导航添加点击样式以及添加选项卡的操作。该个方法就是点击侧边导航的内容触发的。
添加点样式这一个我就不说了,每一个人的样式不一样,我是通过给他们添加一个我已经写好了的类,判断是否有这个类,如果有就移除,然后给当前点击到的这个标签添加该类名。
然后就是获取点击的需要的内容了,就是上面说的三个值。跳过某个页面,也就是说点击时该页面不用添加到选项卡中。
接着就用要使用到刚刚的数组了,用数组判断当前点击的内容是否已经添加到选项卡中。
判断如果状态状态值为真正的即为可添加,然后就执行添加选项卡的代码。最后再切换一下选项卡即可。
切换选项卡时同时也要切换侧边导航的样式。
下面是删除的代码,删除选项卡的同时也要把存放选项卡数据的数组的相应内容删除掉。
这样一个历史记录就是完成了。
最后就是全部的js代码
var LiShiLiuLanJiLus=new Array();//保存历史浏览记录
var元素;
$(函数(){//===注意:选项卡依赖元素模块,否则无法进行功能性操作
layui。使用((“元素”)、功能(){
元素=layui.element;//监听选项卡的切换事件
element.on(选项卡(Tab_LiShiJiLu),函数(数据){//获取lay-id
var lay_id=$(这).attr (“lay-id”);//为侧边导航添加样式
如果($ (" ul。子李跨度”).hasClass (“clickStyle”)) {
$ (" ul。子李span.clickStyle”) .removeClass (“clickStyle”);
$ (" # " + lay_id) .addClass (“clickStyle”);
}
});
});//===为侧边导航添加点击样式,及添加选项卡
$ (" ul。子李跨度”)。点击(函数(){//选中侧边导航,为其添加样式
如果($ (" ul。子李跨度”).hasClass (“clickStyle”)) {
$ (" ul。子李span.clickStyle”) .removeClass (clickStyle ");//清除上一个的样式
}
(美元).addClass (clickStyle ");//为当前的跨度加上样式//获取相应的内容
var thisOnclickTxt=$(这)。text();//获取标题(用于选项卡的标题)
var thisOnclickId=$(这).prop (" id ");//获取标签id值(用于选项卡的lay-id值)
var thisOnclickUrl=$(这).attr (Url_index ");//获取跳转到路径//跳过该页面
如果(thisOnclickTxt==八列菹ⅰ?{
返回;
}
如果(thisOnclickTxt==白⑾锹健?{
返回;
}//判断是否要添加选项卡
var状态=true;//声明一个状态//循环数组内容
(var=0;我& lt;LiShiLiuLanJiLus.length;我+ +){//判断判断该选中内容是否存在数组内
如果(thisOnclickId==LiShiLiuLanJiLus[我]){//存在,把状态值改为假
国家=false;
}
}
如果(状态==true) {
LiShiLiuLanJiLus.push (thisOnclickId);//向数组后面插入内容//添加选项
元素。tabAdd (Tab_LiShiJiLu, {//Tab_LiShiJiLu为lay-filter="相对应的值
标题:thisOnclickTxt + ' & lt;我类=發ayui-icon layui-unselect layui-tab-close”οnclick=癲elTab()“祝辞& # 4102;& lt;/i> ',//标题
内容:“& lt;滚动iframe id=澳谌荨?白远眘rc=" + thisOnclickUrl +”祝辞& lt;/iframe> ',//传如子页面
id://lay-id thisOnclickId
});
}//切换选项卡
元素。tabChange (Tab_LiShiJiLu, thisOnclickId);
});
});//删除选项卡
函数delTab () {
$ (" .layui-tab”)。(“点击”,函数(e) {
如果($ (e。target) . (“.layui-tab-close”)) {
var deltab=$ (e。target) .parent () .attr (lay-id ");//输出哪个标签被点击,没有值时返回定义
元素。tabDelete (Tab_LiShiJiLu, deltab);//删除lay-id=" xxx "的这一项//循环数组内容
(var=0;我& lt;LiShiLiuLanJiLus.length;我+ +){
如果(deltab==LiShiLiuLanJiLus[我]){
LiShiLiuLanJiLus。拼接(我1);//删除数组的一个元素,我为当前元素在数组内的位置
}
}
}
});
}
