我使用ajax在導航的幫助下加載外部內容。使用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>
謝謝。這工作 – user1830414