jQuery加载页面只有一次选项卡点击

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”类，然后当这个标签最终加载时，再次移除该类。