此文用于记录layui tab使用
官方文档：
tab选项卡结构：/doc/element/tab.html
tab页面绑定与切换：/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);//判断右侧是否有tabif ($('.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;}});//不存在，增加tabif (isExist == false) {tabFunction.tabAdd(dataid.attr('lay-href'), dataid.attr('data-id'), dataid.attr('data-title'));}}//转到要打开的tabtabFunction.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切换tabtabChange: function (id) {element.tabChange('tables',id) },//关闭指定的tabtabDelete: function (id) {element.tabDelete('tables',id)}}});</script>
4.多页面显示：
