若依tab-content面板失效、使用load的解决方法（附详细步骤）

原创已于 2023-09-11 10:25:37 修改 · 619 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2023-09-01 09:51:19 首次发布

文章讲述了如何在JavaScript中处理由于`load`方法导致的面板间来回跳转问题，方法是将公共JS移动到每个面板的load事件中执行，确保面板间的独立性。作者还提供了HTML和JavaScript代码示例，展示了如何动态加载面板内容并包含一个自定义刷新方法。

【版权所有，文章允许转载，但须以链接方式注明源地址，否则追究法律责任】
【创作不易，点个赞就是对我最大的支持】

前言

仅作为学习笔记，供大家参考
总结的不错的话，记得点赞收藏关注哦！

思路：因为load方法每次加载的时候不会加载js（可能），导致面板之间来回跳转有问题，所以要去掉所有面板的head和foot只留一个默认面板的
解决方法：将面板的公共js都放在每次面板的加载事件load方法里边

选项卡index页面

这里只用一个面板项，动态load加载

html代码

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a id="l_repeatTest" data-toggle="tab" >未回复</a></li>
    <li><a id="l_syncConfig" data-toggle="tab">申请延期</a></li>
    <li><a id="l_channelConfig"  data-toggle="tab">已回复</a></li>
    <li><a id="l_returned"  data-toggle="tab">已退回</a></li>
    <li><a id="l_audited"  data-toggle="tab">已审核</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade i in active">
        <div class="panel-body" id="task">
        </div>
    </div>
</div>

把公共的js，就是面板每次要加载的js都放到index选项卡页面来加载

index中js代码

<script th:inline="javascript">
    var prefix = ctx + "business/task";
    $(function () {  
        initLoad("task");//默认加载第一个面板
    });
  //选项卡事件
    $("#l_repeatTest").click(function(){
        initLoad("task");
    });
    $("#l_syncConfig").click(function(){
        initLoad("extension");
    });

    function reloads() {//自定义刷新方法
        location.reload();
    }
    //通用方法(关键部分)
    function initLoad(res){
        $("#task").load(prefix+"/"+res,function (){
            //所有面板的公共默认加载js放这里
            layui.use('laydate', function(){
                var laydate = layui.laydate;
                laydate.render({
                    elem: '#year',
                    type: 'year',
                    done: function(value, date) {
                        $.table.refresh();
                    }
                });
            });
        });
    }
</script>