我有一个页面,上面有一些选项卡,单击某些选项卡后,其他页面会动态加载。唯一的问题是每次单击选项卡时都会加载这些页面。如何让它们在第一次点击时仅加载一次?
我使用的代码是这样的:
$(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()
保存 bool 值。
$(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;
});
});
关于jQuery 仅在选项卡单击时加载页面一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3509712/