jQuery功能之後頁面重新加載時遇到問題

Question

我一直在努力這一段時間，我不能想出一個解決方案。我有一個簡單的jQuery函數，可以淡入淡出餐廳菜單上的內容元素。時尚完美，但運行時，頁面重新加載並跳回頂端。我在這裏找到了各種建議的解決方案，但都沒有工作。我使用了返回false;和e.preventDefault（）;以及將鏈接HTML改爲跨度和按鈕，但它們都不起作用。這是在Wordpress上定製的主題，這裏是我的HTML。

<div id="menu_nav"> 

<ul> 
<li><a href="#" id="mainattraction" class="current-link menu-link">Main Attractions</a></li> 
    <li><a href="#" id="seafoodcombos" class="menu-link">Seafood Combo's</a></li> 
<li><a href="#" id="harbouronaroll" class="menu-link">Harbour On A Roll</a></li> 
<li><a href="#" id="meangreens" class="menu-link">Mean Greens</a></li> 
<li><a href="#" id="appetizers" class="menu-link">Appetizers</a></li> 
<li><a href="#" id="kidsmenu" class="menu-link">Kids Menu</a></li> 
<li><a href="#" id="onthegrill" class="menu-link">On The Grill</a></li> 
<li><a href="#" id="soups" class="menu-link">Soups</a></li> 
</ul> 

</div> 

<div id="mainattractionscontent"> 
//content 
</div> 

<div id="seafoodcomboscontent"> 
//content 
</div> 

等等，等等

，這裏是我目前使用jQuery。

$('document').ready(function() { 

    $('.menu-link').click(function(event) { 
     var id = this.id + 'content'; 
     var link = this.id; 
     $('.active').fadeOut(600, function(){ 
      $('#' + id).fadeIn(600); 
      $('.active').removeClass('active'); 
      $('#' + id).addClass('active'); 
      $('.current-link').removeClass('current-link'); 
      $('#' + link).addClass('current-link'); 
      return false; 
     }); 
    }); 

}); 

您也可以在http://theharboursportsbar.com/the-menu檢查出的頁面以供參考。先謝謝您的幫助。

Answer 1

return false;需要位於「點擊」處理程序中，而不是淡出回調。

$('.menu-link').click(function(event) { 
    var id = this.id + 'content'; 
    var link = this.id; 
    $('.active').fadeOut(600, function(){ 
     $('#' + id).fadeIn(600); 
     $('.active').removeClass('active'); 
     $('#' + id).addClass('active'); 
     $('.current-link').removeClass('current-link'); 
     $('#' + link).addClass('current-link'); 
    }); 
    return false; 
}); 

調用event.preventDefault();將工作太，但它再次在「點擊」處理程序，而不是動畫回調發生。

Answer 2

它實際上並不具有鏈接的默認屬性。 Pointy是正確的，因爲你應該將返回錯誤移到點擊處理程序之外，但這不是實際問題。

當你淡出你的內容時，頁面變得更小，足夠小，以至於在大多數顯示器/視口中，無論所有內容都可以放在一個頁面上，所以它看起來是「跳躍」到頂部現實，它只是展示所有可能的內容。所以基本上你的問題在於fadeOut函數本身的性質，在fadeOut函數結束時它會設置影響頁面佈局的display:'none'。

試試這個：

$('.menu-link').click(function(event) { 
    var id = this.id + 'content'; 
    var link = this.id; 
    $('.active').animate({opacity:0},{duration:600, complete:function(){ 
     $('#' + id).css('display','block').animate({opacity:1},{duration:600}); 
     $('.active').removeClass('active').css('display','none'); 
     $('#' + id).addClass('active'); 
     $('.current-link').removeClass('current-link'); 
     $('#' + link).addClass('current-link'); 
    }}); 
    return false; 
});