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

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

我使用的代码是这样的：

$(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

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