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