CODEWITHSUNDEEP
jquery
oneumbre
oneumbre

Reputation: 13

jQuery tabs return false;

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

Upvotes: 0

Views: 640

Answers (2)

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

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

Upvotes: 0

nbrooks
nbrooks

Reputation: 18233

Working Demo

HTML

<div id='parent'>
<a href='#' id='acounttab' class='tablink'> Account </a>
<a href='#' id='salestab' class='tablink'>Sales </a>
<a href='#' id='delivertab' class='tablink'>Deliver </a>
</div>
<div id='tabtext1'>Account - Here you go!</div>
<div id='tabtext2'>Sales - Here you go!</div>
<div id='tabtext3'>Deliver - Here you go!</div>​

CSS

div[id^="tabtext"] { display:none; }​

Javascript

$(function() {
    $('#parent').on('click', 'a.tablink', function(e) {
        e.preventDefault();

        $(this).css("border", "2px solid #009FE3");
        $('a.tablink').not(this).css("border", "2px solid white");

        var i = $(this).index('a.tablink');
        var tab = $('#tabtext'+(i+1)).fadeIn(200);
        $('div[id^="tabtext"]').not(tab).hide();

        return false;
    });
});

​

Upvotes: 1

Related Questions