jQuery函数后页面重新加载有问题答案

【问题标题】：Having Trouble With Page Reload After jQuery FunctionjQuery函数后页面重新加载有问题
【发布时间】：2012-07-10 22:56:36
【问题描述】：

我已经为此苦苦挣扎了一段时间，但我无法提出解决方案。我有一个简单的 jQuery 函数，可以淡入和淡出餐厅菜单上的内容元素。这种时尚完美运行，但当它运行时页面重新加载并跳回顶部。我在这里找到了各种建议的解决方案，但没有一个有效。我用过 return 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 的页面以供参考。在此先感谢您的帮助。

【问题讨论】：

标签： jquery

【解决方案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(); 也可以，但它应该再次发生在“点击”处理程序中，而不是动画回调中。

【讨论】：

【解决方案2】：

它实际上不是链接的默认性质。 Pointy 是正确的，因为您应该将 return false 移到 click 处理程序之外，但这不是这里的实际问题。

当您淡出内容时，页面会变小，在大多数显示器/视口上，无论所有内容都可以放在一个页面上，因此它似乎“跳”到顶部，而实际上，它只是显示所有可能的可用内容。所以基本上你的问题在于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;
});

【讨论】：