Tabs taking be to top of page

Question

I have set up tabbing but when I click on a tab it shows the tabbed content, but it also takes me to the top of the page, which I don't want it to.

Here is my code...

$('.team-tab1').click(function() {
                $('#team-tab2-content,#team-tab3-content').css('display', 'none');
                $('#team-tab1-content').fadeIn();
                $(this).addClass('active');
                var width = $(this).outerWidth();
                $(this).children().css('left',(width/2) - 7);
                $('.team-tab2,.team-tab3').removeClass('active');
                return false;
            });

Thanks for any help, C

Answer 1

My best guess is something is failing before you return false. You can apply preventDefault() at the start to disable the click event, but I think there's something else that we need to look into.

$('.team-tab1').click(function(event) {
     event.preventDefault();
     ...
});

At the very least I'd floor the divide to force an integer and convert it to a string.

$(this).children().css('left', (Math.floor(width/2) - 7) + 'px');