Ok, this is driving me crazy!
I'm working with a "tab like" submenu to show 3 different tables. Each link inside this submenu hides the current content and show another one.
NOTE: for now I'll leave a direct link to the page I'm working on so you may check the problem by yourself.
To avoid the <a>
(anchor) jumps, I'm already trying <a onclick="return false;">
(which works fine in another site I have). In my jQuery code I'm also using "e.preventDefault();" that helps avoiding the jump to the top of the page, but even using it the page always jumps to some part of the page above the sublinks.
I really don't know what else I could do to avoid this jumps.
For now this is what I have inside my 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>
And this is my 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');
}
});
}
Also, maybe there's a better way to do this "show and hide" stuff, but this seems to work fine. Well, I'll be glad if anyone can shed a light on this problem and help me! Thanks in advance!
Use .show()
and .hide()
instead of .fadeIn()
and .fadeOut()
.
If you want to keep the animation, you can try .show('slow')
and .hide('slow')
but that may trigger the jumping problem also.