Modify Existing Questions answer

Just a quick questions. Im new to this site but this link Show/Hide开发者_开发技巧 multiple DIVs with Select using jQuery

I just wanted to know how to change the code so its not in a drop down select but an actual link.

If anyone could help me that would be badass!!

I have looked everywhere and this is closest to what i could find.

Thanks everyone. Woot!

I modified the accepted answer from this question how to show/hide divs by select.(jquery) the question the OP linked just so he could see the similarities between doing the two. As it was pointed out this naming convention is not good at all.

Markup

<a id="1" href="#">Link one</a>
<a id="2" href="#">Link two</a>
<a id="3" href="#">Link three</a>


<div id="div1">content here 1</div>
<div id="div2">content here 2</div>
<div id="div3">content here 3</div>    

JS

$(function(){
    $('#div1, #div2, #div3').hide();

    $('a').click(function() {
       $('#div1, #div2, #div3').hide();
       $('#div' + $(this).attr('id')).show();
    });
}

Demo http://jsfiddle.net/kJGcE/

And here is a better way

Markup

<a class="divHide" href="#">Link one</a>
<a class="divHide" href="#">Link two</a>
<a class="divHide" href="#">Link three</a>


<div class="divShow">content here 1</div>
<div class="divShow">content here 2</div>
<div class="divShow">content here 3</div>

JS

$('a.divHide').click(function() {
   $('.divShow').hide();
   $('.divShow').eq($(this).index()).show();
});

Demo http://jsfiddle.net/kJGcE/2/