2012-11-22 167 views
0

我使用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> 

回答

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'); 
    }) 

}); 
+0

謝謝。這工作 – user1830414

0

什麼樣的東西? :

if($(_element).is('visible')){ 
// do not load again content 
}else{ 
//load content 
} 

_element應該在一些內容ID或類剛加載:)

1

替換您如下一行:

var current; 

這一個:

var current = '1.php'; 
+0

謝謝。這工作 – user1830414