jQuery Load Page仅在选项卡上一次单击一次
-
29-09-2019 - |
题
我有一个页面,上面有一些标签,然后单击某些选项卡后,其他页面会动态加载。唯一的问题是,每次单击选项卡时,这些页面加载。在第一次点击时,如何使它们仅加载一次?
我使用的代码是:
$(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;
});
});
谢谢!
解决方案
采用 .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;
});
});
其他提示
我昨天刚刚做了这样的功能。我这样做的方式是在任意div中添加一个“ still_loading”类(例如您的容器div),然后当标签最终加载时,再次删除该类。
不隶属于 StackOverflow