我在导航的帮助下使用ajax加载外部内容。
一切都很好。如果用户单击菜单选项卡的某个内容,则用户也无法再次加载相同的内容。但如果用户是第一次在网站上,他可以再次加载内容(第一个菜单选项卡)。
我希望用户无法做到这一点。
这是JavaScript:
$.get('header/1.php', function(data) {
$('.contentHeader').html(data);
});
$.get('content/1.php', function(data) {
$('.content').html(data);
});
$.get('advertisement/1.php', function(data) {
$('.advertisement').html(data);
});
var current;
$(".navigation li").click(function() {
var source = $(this).attr('id') + ".php";
// the current content doesn't load again
if(current === source) {
return;
}
current = source;
// content
$(".content").fadeOut(function() {
$(this).load("content/" + source).fadeIn('normal');
})
// advertisement
$(".advertisement").fadeOut(function() {
$(this).load("advertisement/" + source).fadeIn('normal');
})
// header
$(".contentHeader").fadeOut(function() {
$(this).load("header/" + source).fadeIn('normal');
})
});
这是html代码:
<div class="navigation">
<ul>
<li id="1">
<div id="menuImage1" class="menuImage"></div>
<div class="menuText"><p>1</p></div>
</li>
<li id="2">
<div id="menuImage2" class="menuImage"></div>
<div class="menuText"><p>2</p></div>
</li>
<li id="3">
<div id="menuImage3" class="menuImage"></div>
<div class="menuText"><p>3</p></div>
</li>
<li id="4">
<div id="menuImage4" class="menuImage"></div>
<div class="menuText"><p>4</p></div>
</li>
<li id="5">
<div id="menuImage5" class="menuImage"></div>
<div class="menuText"><p>5</p></div>
</li>
<li id="6">
<div id="menuImage6" class="menuImage"></div>
<div class="menuText"><p>6</p></div>
</li>
</ul>
</div>
答案 0 :(得分:1)
我认为你应该初始化current
变量。
即 - :
$.get('header/1.php', function(data) {
$('.contentHeader').html(data);
});
$.get('content/1.php', function(data) {
$('.content').html(data);
});
$.get('advertisement/1.php', function(data) {
$('.advertisement').html(data);
});
var current = "1.php";
$(".navigation li").click(function() {
var source = $(this).attr('id') + ".php";
// the current content doesn't load again
if(current === source) {
return;
}
current = source;
// content
$(".content").fadeOut(function() {
$(this).load("content/" + source).fadeIn('normal');
})
// advertisement
$(".advertisement").fadeOut(function() {
$(this).load("advertisement/" + source).fadeIn('normal');
})
// header
$(".contentHeader").fadeOut(function() {
$(this).load("header/" + source).fadeIn('normal');
})
});
答案 1 :(得分:1)
替换以下行:
var current;
这个:
var current = '1.php';
答案 2 :(得分:0)
if($(_element).is('visible')){
// do not load again content
}else{
//load content
}
_element
应该是刚刚加载的内容中的一些id或类:)