Question

The engine I use calls the jquery tabs.js script to handle the tab functions. Problem is that anytime the tabs are at the top of the page and you click on a link, they quickly scroll back down towards the bottom of the page. I’ve been trying to solve this problem for hours and all solutions point to similar answers, but none work for me.

$.fn.tabs = function() {
var selector = this;

this.each(function() {
    var obj = $(this); 

    $(obj.attr('href')).hide();

    $(obj).click(function() {
        $(selector).removeClass('selected');

        $(selector).each(function(i, element) {
             $($(element).attr('href')).hide();
        });

        $(this).addClass('selected');

        $($(this).attr('href')).fadeIn();

        return false;
        e.preventDefault();
    });
});

$(this).show();

$(this).first().click();
};

As per a suggested fix I found, I changed one of the lines above to read:

$($(element).attr('href')).fadeOut(1);

I’ve also tried to add e.preventDefault(); after return false; but still no luck?!? I was able to find a site that runs a different template and the problem doesn’t exist there. I’ve been using Firefox and examining the code to try and find how they do it but after hours of hitting the wall I seek your wisdom oh wise ones!

Answer 1

In the html, just add onclick="return false;" and the jumping will stop, eg:

<ul>
    <li><a href="#tabsDetails" id="tabsDetailsLink" onclick="return false;" >Details</a></li>
    <li><a href="#tabsAddress" id="tabsAddressLink" onclick="return false;" >Address</a></li>
</ul>