Script
function tabPanel(target){ // 引数で対象要素を渡す
var tabArea = $(target); // 引数から要素を受け取りjQueryオブジェクトとして保存しておく
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();
}
}
jQuery(function($){
tabPanel('div.tabArea');
});
Demo
tab1tab1tab1tab1tab1tab1tab1
tab1tab1tab1tab1tab1tab1tab1
tab1tab1tab1tab1tab1tab1tab1
tab1tab1tab1tab1tab1tab1tab1
tab1tab1tab1tab1tab1tab1tab1
tab1tab1tab1tab1tab1tab1tab1
tab2tab2tab2tab2tab2tab2tab2
tab2tab2tab2tab2tab2tab2tab2
tab2tab2tab2tab2tab2tab2tab2
tab2tab2tab2tab2tab2tab2tab2
tab2tab2tab2tab2tab2tab2tab2
tab2tab2tab2tab2tab2tab2tab2