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」類，然後當這個標籤最終加載時，再次移除該類。