HTML
<div class="tabArea">
<ul class="tab">
<li><a href="#tab1">tab1</a></li>
<li><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);
tabPanel.not(':first').hide();
tab.eq(0).addClass('active');
tab.click(function(){
var targetTabId = $('a',this).attr('hash');
tab.removeClass('active');
tabPanel.hide();
$(this).addClass('active');
$(targetTabId).show();
return false;
});
});
Demo
tab1tab1tab1tab1tab1tab1tab1
tab1tab1tab1tab1tab1tab1tab1
tab1tab1tab1tab1tab1tab1tab1
tab1tab1tab1tab1tab1tab1tab1
tab1tab1tab1tab1tab1tab1tab1
tab1tab1tab1tab1tab1tab1tab1
tab2tab2tab2tab2tab2tab2tab2
tab2tab2tab2tab2tab2tab2tab2
tab2tab2tab2tab2tab2tab2tab2
tab2tab2tab2tab2tab2tab2tab2
tab2tab2tab2tab2tab2tab2tab2
tab2tab2tab2tab2tab2tab2tab2