Question

我有一个页面上有一些标签，点击某些标签后，其他页面会动态加载。唯一的问题是每次单击选项卡时都会加载这些页面。如何在第一次点击时只加载一次？

我使用的代码是：

$(document).ready(function(){
    $(".tab-content").hide();
    $("#one").show();

    $("a.tab-name").click(function(){
        $(".tab-name-active").removeClass("tab-name-active");
        $(this).addClass("tab-name-active");
        $(".tab-content").fadeOut();
        var content_show=$(this).attr("title");

        if (content_show === 'three') {
            $("#"+content_show).load('new-page.php', function() {
                $("#sorttable").tablesorter({
                    headers: {0: {sorter: false}}
                });
            });
        }
        else if (content_show === 'four') {
            $("#"+content_show).load('new-page-2.php');
        }

        $("#"+content_show).delay(100).fadeIn('slow');

        return false;
    });
});

谢谢！

Answer 1

使用.data()保存布尔值。

$(document).ready(function(){
    $(".tab-content").hide();
    $("#one").show();

    $("a.tab-name").data('loaded',false).click(function(){
        var $this = $(this);
        $(".tab-name-active").removeClass("tab-name-active");
        $this.addClass("tab-name-active");
        $(".tab-content").fadeOut();
        var content_show= this.title;

        if (! $this.data('loaded')) {

          if (content_show === 'three') {
            $("#"+content_show).load('new-page.php', function() {
                $("#sorttable").tablesorter({
                    headers: {0: {sorter: false}}
                });
                $this.data('loaded',true);
            });
          }
          else if (content_show === 'four') {
            $("#"+content_show).load('new-page-2.php', function(){
                $this.data('loaded',true);
            });
          }

        } 

        $("#"+content_show).delay(100).fadeIn('slow');

        return false;
    });
});

Answer 2

昨天我刚刚做了这样的功能。我这样做的方法是在任意div（比如你的容器div）中添加一个“still_loading”类，然后当选项卡最终加载时，再次删除该类。

jQuery只在选项卡上单击加载页面一次

2 个答案: