I applied a class to each of the content areas to simply things. HTML:
<div class="tabgroup"><a href="#home1">#home1</a></div>
<div class="tabgroup"><a href="#home2">#home2</a></div>
<div class="tabgroup"><a href="#home3">#home3</a></div>
<div class="tabgroup"><a href="#home4">#home4</a></div>
<div class="tabgroup"><a href="#home5">#home5</a></div>
<div id="home1" class="content-area">This is #home1's Content</div>
<div id="home2" class="content-area">This is #home2's Content</div>
<div id="home3" class="content-area">This is #home3's Content</div>
<div id="home4" class="content-area">This is #home4's Content</div>
<div id="home5" class="content-area">This is #home5's Content</div>
JS:
$(function () {
var $tabs = $('div.tabgroup'),
$links = $tabs.find('a'),
$active = function(){
var ret = $links.eq(0);
$links.each(function(){
if ($(this).attr('href') == location.hash){
ret = $(this);
}
});
return ret;
}(),
$contentAreas = $('.content-area'),
$activecontent = $($active.attr('href'));
$active.addClass('active');
$contentAreas.hide();
$activecontent.show();
$tabs.on('click','a',function(e){
e.preventDefault();
$active = $(this);
$activecontent = $($active.attr('href'));
$links.removeClass('active');
$active.addClass('active');
$contentAreas.hide();
$activecontent.show();
});
});