完美解决layui每点击一次左侧菜单就刷新一次右侧对应Tab页面的问题

最近我在使用layui的时候发现,点击左侧菜单右边的tab只是跳转到了对应的页面,但是并没有刷新,本人觉得这种太不人性化了,决定优化一下,然后百度了好久没有找到解决方案,最后决定硬着头皮直接看它底层的实现代码,发现其实也挺简单的.

1:实现原理   我是使用的iframe做跳转,所以在每次切换到当前tab的时候就重新加载页面即可
2:实现方法   在layui的底层js,一般就是admin.js里面找到tabChange方法(如果你觉得实在不好找直接用全局搜索就可以了),然后在这个方法里面加上我注释下面这段代码即可

	tabChange: function (id) {
            //切换到指定Tab项
            element.tabChange('wenav_tab', id);
            var othis = $('.layui-tab-title').find('>li[lay-id="' + id + '"]'),
                index = othis.parent().children('li').index(othis),
                parents = othis.parents('.layui-tab').eq(0),
                item = parents.children('.layui-tab-content').children('.layui-tab-item'),
                src = item.eq(index).find('iframe').attr("src");
            item.eq(index).find('iframe').attr("src", src);
        },

最后附上我主页页面菜单的结构 因为这个是根据我的页面的结构写的,如果你的主页页面跟我的结构不太一样,灵活修改即可

<!-- 左侧菜单开始 -->
<div class="left-nav">
    <div id="side-nav">
        <ul id="nav">
            <#list menus as item>
                <li >
                    <a href="<#if (item.rul)??>${item.rul}<#else>javascript:;</#if>">
                    <#--<i class="iconfont">&#xe6b8;</i>-->
                        <cite>${item.name}</cite>
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu">
            <#list item.children as children>

                <li >
                    <a  mhref="<#if (children.url)??>${children.url}<#else>javascript:;</#if>">
                        <i class="iconfont">&#xe6a7;</i>
                        <cite>${children.name}</cite>
                    </a>
                </li>
            </#list>
                    </ul>
                </li>
            </#list>
        </ul>
    </div>
</div>
<!-- <div class="x-slide_left"></div> -->
<!-- 左侧菜单结束 -->

• 最后希望小伙伴们在使用layui的过程中遇到问题的可以加我私信交流哦！