准备工作
1.添加导航栏
<ul class="layui-nav layui-nav-tree " lay-filter="menu" style="height: 634px;">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">消息管理</a>
<dl class="layui-nav-child">
<dd >
<a href="javascript:;" _href="tableMess.html" name="1">收件箱(js)</a>
</dd>
<dd>
<a href="javascript:;" _href="sendMess.html" name="3">发件箱</a>
</dd>
<dd>
<a href="javascript:;" _href="modifyMess.html" name="4">写信息</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">账户管理</a>
<dl class="layui-nav-child">
<dd>
<a href="javascript:;" _href="seeMess.html" name="5">我的资料</a>
</dd>
</dl>
</li>
</ul>
2.添加tab选项卡
<div class="layui-tab" lay-filter="main_content" lay-allowClose="true">
<ul class="layui-tab-title" >
<li class="layui-this first-tab" lay-id="111">首页</li>
<li lay-id="222">发送信息</li>
<li lay-id="333">权限分配</li>
<li lay-id="444">审核</li>
<li lay-id="555">订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
块加载js
layui.use('element', function(){
var element = layui.element;
//基本上使用layui的内置模块 都需要写这段代码
//对模块的事件操作都写在这方法块里
});
点击导航栏添加tab页面
官方提供tabAdd以及tabChange、tabDelete方法
element.tabAdd('demo', {
title: '选项卡的标题'
,content: '选项卡的内容' //支持传入(html代码）不持支直接传入html页面
,id: '选项卡标题的lay-id属性值'
});
//参数filter：tab元素的 lay-filter="value" 过滤器的值（value）
//参数layid：选项卡标题列表的 属性 lay-id 的值
element.tabChange('demo', 'layid'); //删除 lay-id="xxx" 的这一项
element.on('tabDelete(filter)', function(data){
console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标(此下标是标签页在的位置并不是固定的)
console.log(data.elem); //得到当前的Tab大容器
});
因为官方提供的不支持直接传入html页面所以自己实现功能
在这里以为点击导航栏的一级标题也能触发点击事件，所以直接为数组添加一个undefined值，后面判断不触发增加tab页面事件
var items = new Array();
items[0]=undefined;
var index = 1;
//以上为全局变量 以下为模块加载里面的内容
//nav 导航栏专用 menu 为lay-filter="nenu"；
element.on("nav(menu)", function(elem) {
//console.log(elem.attr("name")); //得到当前点击的DOM对象
var name = elem.attr("name");
var id = name;//因为加载外部页面name肯定不一样，所以在这id也唯一
var href = elem.attr("_href");//传入要加载的页面名称
var text = elem.text();//获取点击导航栏一列的内容
//console.log(items);
//indexOf()方法 如果存在目标返回下标 默认为0，不存在返回-1
//因为要实现同一个页面不多次添加，而是如果存在直接切换tab
if(items.indexOf(id) == -1) {
items[index] = id;
index++;//避免值被覆盖
element.tabAdd("main_content", {
title: text,
id: id,
content: '<span id="' + name + '_container"></span><script>loadTab("#' + name + '_container", "' + href + '");</script>'
//写入脚本通过下面方法 loadTab 加载页面代码块（不必要重复导入layui.js等文件）
});
element.tabChange("main_content", id);
}else{
element.tabChange("main_content", id);
}
});
//当然也要导入jquery的js文件
window.loadTab = function(selector, url) {
//console.log("url: " + url);
$(selector).load(url);
}
因为要实现以上功能所以在关闭标签的时候要在items容器里面删除相对应的name值
虽然删除时给的下表不固定，但是在我们存入数组的时候是有记录的，所以，对数组的对应索引删除即可，
起初调用delete 方法删除数组内容，确实能删除，但是位置是还在的 状态为 empty 下次添加的时候会覆盖，所以导致先关闭哪些标签，只能再以这个顺序打开QAQ, 所以我的实现是遍历数组， 覆盖items
//监听tab
element.on('tabDelete(main_content)', function(data){
// console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
var ind = data.index;
var newArray = new Array();
for(var i = 0;i<items.length;i++){
if(i<ind){
newArray[i] = items[i];
}else if(i>ind){
newArray[i-1]=items[i];
}
}
// delete items[ind];
// console.log(items);
items = newArray;
index--;
// console.log(data.elem); //得到当前的Tab大容器
});
差点忘记
因为tab页面默认设置的是 可关闭的，所以在tab第一个标签上添加了一个class 名字为 first-tab
因为用layui的部件肯定是在该变结构的，所以可以打开浏览器开发工具，查看代码
.first-tab i.layui-tab-close{
display:none!important;
}
