Layui tab选项卡切换多页面：实现多标签页管理

此文用于记录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.多页面显示：

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删