Question

Just a quick one, which is fustrating!

I have three tabs which just literally fade in and hide the other tab content. Very basic.

Just can’t figure out how to stop the links sending the page to the top, not a massive problem but annoying.

Here is there jQuery.

<script>
     jQuery("#accounttab").live('click', function(){

        jQuery("#accounttab").css("border", "2px solid #009FE3");
        jQuery("#salestab").css("border", "2px solid white");
        jQuery("#delivertab").css("border", "2px solid white");

        jQuery("#tabtext1").fadeIn(200);
        jQuery("#tabtext2").hide();
        jQuery("#tabtext3").hide();
    return false;
    }); 

     jQuery("#salestab").live('click', function(){

        jQuery("#salestab").css("border", "2px solid #009FE3");
        jQuery("#accounttab").css("border", "2px solid white");
        jQuery("#delivertab").css("border", "2px solid white");

        jQuery("#tabtext1").hide();
        jQuery("#tabtext2").fadeIn(200);
        jQuery("#tabtext3").hide();

    return false;
    }); 

     jQuery("#delivertab").live('click', function(){

        jQuery("#delivertab").css("border", "2px solid #009FE3");
        jQuery("#accounttab").css("border", "2px solid white");
        jQuery("#salestab").css("border", "2px solid white");

        jQuery("#tabtext1").hide();
        jQuery("#tabtext2").hide();
        jQuery("#tabtext3").fadeIn(200);

    return false;
    });


</script>

any advice would be awesome

Answer 1

you could shorten your code like:

html

<a id="accounttab" class='actab' href="#">Test1</a>
<a id="salestab" class='sltab' href="#">Test2</a>
<a id="delivertab" class='dtab' href="#">Test3</a>

<br /><br/>
<div id="tabtext1" class='actab'>Div test 1</div>
<div id="tabtext2" class='sltab'>Div test 2</div>
<div id="tabtext3" class='dtab'>Div test 3</div>

js

var tabsArr = ['#accounttab', '#salestab', '#delivertab'];
var joined = tabsArr.join(", ");

$(joined).live("click", function(e) {
    e.preventDefault();
    var selectedClass = $(this).attr("class");
    $("div[class!='"+selectedClass+"']").css("border", "2px solid white").hide();
    $("div[class='"+selectedClass+"']").css("border", "2px solid #009FE3").fadeIn(200);    
});

Demo: jsFiddle