此文用于记录layui tab使用
官方文档:
tab选项卡结构:https://www.layui.com/doc/element/tab.html
tab页面绑定与切换:https://www.layui.com/doc/modules/element.html
1.新建导航选项
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
@*左侧导航区域 *@
<ul class="layui-nav layui-nav-tree" lay-filter="LeftItem">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" class="link-active" lay-href="/Home/LayoutUi" data-id="1" data-title="模具主数据"><i class="layui-icon layui-icon-home"></i> 模具主数据</a>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" class="link-active" lay-href="/Home/MoldRepair" data-id="2" data-title="模具保养查询"><i class="layui-icon layui-icon-auz"></i> 模具保养查询</a>
</li>
</ul>
</div>
</div>
2.页面主体区域创建tab选项卡:tab容器,title标题,content内容
<div class="layui-body">
<div class="layui-tab" lay-filter="tables" lay-allowclose="true">
<ul class="layui-tab-title"></ul>
<div class="layui-tab-content"></div>
</div>
</div>
3.js代码切换tab页面
<script>//JavaScript代码区域
layui.use(['element','layer','jquery'], function(){
var element = layui.element;
var $ = layui.jquery;
//左侧菜单点击事件
$('.link-active').on('click', function () {
var dataid = $(this);
//判断右侧是否有tab
if ($('.layui-tab-title li[lay-id]').length <= 0) {
tabFunction.tabAdd(dataid.attr('lay-href'), dataid.attr('data-id'), dataid.attr('data-title'));
} else {
//判断tab是否已经存在
var isExist = false;
$.each($('.layui-tab-title li[lay-id]'), function () {
//筛选id是否存在
if ($(this).attr('lay-id') == dataid.attr("data-id")) {
isExist = true;
}
});
//不存在,增加tab
if (isExist == false) {
tabFunction.tabAdd(dataid.attr('lay-href'), dataid.attr('data-id'), dataid.attr('data-title'));
}
}
//转到要打开的tab
tabFunction.tabChange(dataid.attr('data-id'));
});
//定义函数 绑定增加tab,删除tab,切换tab几项事件
var tabFunction = {
//新增tab url 页面地址 id 对应data-id name标题
tabAdd: function (url, id, name) {
element.tabAdd('tables', {
title: name,
content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:800px"></iframe>',
id:id
});
},
//根据id切换tab
tabChange: function (id) {
element.tabChange('tables',id)
},
//关闭指定的tab
tabDelete: function (id) {
element.tabDelete('tables',id)
}
}
});
</script>
4.多页面显示: