Якорная ссылка продолжает прыгать, независимо от того, что я делаю

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

Кроме того, просто для небольшого изменения кода и экономии времени на ввод текста (и для того, чтобы сделать скрипт более динамичным) вам не нужно писать onclick="return false;"на каждую ссылку HTML. Просто поместите return false в конец функции.click в 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');

    // Return false for all links in the nav onclick
    return false;

    }
});