HTML

<div class="tabArea">
    <ul class="tab">
        <li><a href="#tab1">tab1</a></li>
        <li class="active"><a href="#tab2">tab2</a></li>
    </ul>
    <div id="tab1" class="tabPanel">
        tab1tab1tab1tab1tab1tab1tab1<br />
        tab1tab1tab1tab1tab1tab1tab1<br />
        tab1tab1tab1tab1tab1tab1tab1<br />
        tab1tab1tab1tab1tab1tab1tab1<br />
        tab1tab1tab1tab1tab1tab1tab1<br />
        tab1tab1tab1tab1tab1tab1tab1
    </div>
    <div id="tab2" class="tabPanel">
        tab2tab2tab2tab2tab2tab2tab2<br />
        tab2tab2tab2tab2tab2tab2tab2<br />
        tab2tab2tab2tab2tab2tab2tab2<br />
        tab2tab2tab2tab2tab2tab2tab2<br />
        tab2tab2tab2tab2tab2tab2tab2<br />
        tab2tab2tab2tab2tab2tab2tab2
    </div>
</div>

Script

jQuery(function($){
    var tabArea = $('div.tabArea');
    var tabPanel = $('div.tabPanel',tabArea);
    var tab = $('ul.tab li',tabArea);
    
    var tabSet = function(target){
        var targetTabId = $('a',target).attr('hash');
        
        tab.removeClass('active');
        tabPanel.hide();
        $(target).addClass('active');
        $(targetTabId).show();
    }
    
    tab.click(function(){
        tabSet(this);
        return false;
    }).each(function(){
        if($(this).hasClass('active')){
            tabSet(this);
        }
    });
    
    if(tabPanel.filter(':visible').length!=1){
        tab.eq(0).addClass('active');
        tabPanel.not(':first').hide();
    }
});

Demo