Question

好的，这让我发疯了！

我正在使用“tab like”子菜单来显示3个不同的表格。此子菜单中的每个链接都会隐藏当前内容并显示另一个内容。

注意：目前我会留下指向I'm working on页面的直接链接，以便您自行检查问题。

为了避免<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;"。只需在jQuery中.click函数的末尾返回false。

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;

    }
});

无论我做什么，锚链都会不断跳跃

2 个答案: