Switching “tabs” with javascript

Question

I want to create something like tabs. So I have tab itself as

    <div class="tab" >Tab1</div>
    <div class="tab" >Tab2</div>
    <div class="tab" >Tab3</div>

and page content for each tab as

    <div class="pagecontent" >pagecontent for Tab1</div>
    <div class="pagecontent" >pagecontent for Tab2</div>
    <div class="pagecontent" >pagecontent for Tab3</div>

How to make js function in "clever way" so by pressing "tab1", "pagecontent for Tab1" shows and other 2 get hidden? Also, number of tabs varies from page to page.

Answer 1

$(function() {  
    $('.pagecontent').not(':eq(0)').hide();
    $('.tab').click(function() {  
        $('.pagecontent').hide();
        $('.pagecontent').eq($(this).index()).show();
    });  
});

Please see a working demo here > http://jsfiddle.net/Yce32/

Answer 2

Try jQuery UI Tabs:

http://jqueryui.com/tabs/

It's "clever way" - you will have add\\delete\\order tabs in a box