无论我做什么，链环都会不断地跳动

Question

好吧，这快把我逼疯了！

我正在使用一个"类似选项卡"的子菜单来显示3个不同的表。此子菜单中的每个链接都隐藏当前内容并显示另一个内容。

注意：现在我会留下一个直接链接到我正在处理的页面，这样你就可以自己检查问题了。

为了避免<a>（锚点）跳转，我已经在尝试<a onclick="return false;">（它在我的另一个站点中运行良好）。在我的jQuery代码中，我还使用了"e.preventDefault（）；"，这有助于避免跳到页面顶部，但即使使用它，页面也总是跳到子链接上方的页面部分。

我真的不知道我还能做些什么来避免这种跳跃。

现在，这就是我的html:中的内容

<nav id="submenu" class="menu">
<ul>
    <li class="current-menu-item"><a onclick="return false;" href="#" rel="statics">Sites Estáticos</a></li>
    <li><a onclick="return false;" href="#" rel="dynamics">Sites Dinâmicos</a></li>
    <li><a onclick="return false;" href="#" rel="extras">Serviços Extras</a></li>
</ul>

这是我的jQuery:

function subSections(){
$('nav.menu li a').click(function(e){
    e.preventDefault(); //this helps, but don't solve the problem
    var active = $(this).parent();
    var currSection = $(this).attr('rel');
    if(active.hasClass('current-menu-item')!=true){
        // Add and remove 'current-menu-item' class
        $('nav.menu .current-menu-item').removeClass('current-menu-item');
        active.addClass('current-menu-item');
        // Hide currentSection and Show the clicked one
        $('.showing').fadeOut('slow', function(){
            $('#'+currSection).fadeIn('slow').addClass('showing');
        }).removeClass('showing');
    }
});

}

此外，也许有更好的方法来做这种"展示和隐藏"的事情，但这似乎很有效。好吧，如果有人能阐明这个问题并帮助我，我会很高兴的！提前感谢！

Answer 1

使用.show()和.hide()而不是.fadeIn()和.fadeOut()。

如果要保留动画，可以尝试.show('slow')和.hide('slow')，但这也可能引发跳跃问题。

Answer 2

此外，只需重构一小部分代码并节省一点键入（并使脚本更加动态），就不需要在每个html链接上编写onclick="return false;"。只需将return false放在jQuery中.click函数的末尾。

function subSections(){
$('nav.menu li a').click(function(e){
    e.preventDefault(); //this helps, but don't solve the problem
    var active = $(this).parent();
    var currSection = $(this).attr('rel');
    if(active.hasClass('current-menu-item')!=true){
        // Add and remove 'current-menu-item' class
        $('nav.menu .current-menu-item').removeClass('current-menu-item');
        active.addClass('current-menu-item');
        // Hide currentSection and Show the clicked one
        $('.showing').fadeOut('slow', function(){
            $('#'+currSection).fadeIn('slow').addClass('showing');
        }).removeClass('showing');
    // Return false for all links in the nav onclick
    return false;
    }
});