在jQuery函数之后遇到页面重载问题

I've been struggling with this for a while and I can't come up with a solution. I have a simple jQuery function which fades in and out content elements on a menu for a restaurant. The fad works perfectly but when it runs the page reloads and jumps back to the top. I've found all kinds of suggested solutions on here but none of them work. I've used return false; and e.preventDefault(); as well as messing around with the link HTML changing it to a span and a button but none of it is working. It's on a customized Theme on Wordpress here is the HTML I have.

我一直在努力解决这个问题,我无法想出一个解决方案。我有一个简单的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>

etc. etc.

and here is the jQuery I'm currently using.

这是我目前正在使用的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;
       }); 
    });

 });

you can also check out the page at http://theharboursportsbar.com/the-menu for reference. Thanks in advance for the help.

您也可以访问http://theharboursportsbar.com/the-menu查看页面以供参考。在此先感谢您的帮助。

2 个解决方案

#1

The return false; needs to be in the "click" handler, not the fade-out callback.

返回虚假;需要在“click”处理程序中,而不是淡出回调。

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

Calling event.preventDefault(); would work too, but again it should happen in the "click" handler, not the animation callback.

调用event.preventDefault();也会工作,但它应该发生在“点击”处理程序,而不是动画回调。

#2

It's not actually with the default nature of a link. Pointy is right in that you should move the return false outside the click handler, but that's not the actual issue here.

它实际上并不是链接的默认属性。 Pointy是正确的,你应该在点击处理程序之外移动返回false,但这不是这里的实际问题。

When you're fading out your content, the page becomes smaller, small enough that on most monitors/viewports whatever all the content can fit on one page, so it appears to be "jumping" to the top, when in reality, it's just showing all the available content possible. So basically your problem is in the nature of the fadeOut function itself, at the end of the fadeOut function it sets display:'none' affecting the layout of the page.

当你淡出你的内容时,页面变小,小到足以在大多数监视器/视口上,无论所有内容都适合一个页面,所以它似乎“跳”到顶部,而实际上,它只是显示所有可用的内容。所以基本上你的问题在于fadeOut函数本身的性质,在它设置的fadeOut函数的末尾显示:'none'影响页面的布局。

Try this instead:

试试这个:

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

#1