jQuery Tiny jQuery tab script

Very lightweight and efficient tab script with fade in / fade out effect.

The following script goes in the head section:

initHomeTabs=function(){
	//click Event for all tabs:	
	$('.tabs li').click(function(){
		$(".tab").css('display','none');
		$(".tabs li").removeClass('selected');
		$(this).addClass('selected')
		$('#'+this.childNodes[0].href.split('#')[1]).fadeIn('slow');
		return false;
	})
	//set first tab active
	$('.tabs li').eq(0).click();
}
 
// call above function on dom ready event
$(document).ready(function(){
	initHomeTabs(); 
});
 

CSS: (example)

.tab{display:none; background:#6699CC; color:white; margin:0em 0.5em;}
.tabs li{display:inline; padding:0em 1em; margin:0em 0.5em ; background:none; background:#cccccc;}
.tabs li.selected{font-weight:bold; background:#6699CC;}
.tabs li.selected a{color:white; }
.tabs li a{color:white; text-decoration:none;}

HTML:

<ul class="tabs">
	<li><a href="#What">What</a></li>
	<li><a href="#Where">Where</a></li>
	<li><a href="#Who">Who</a></li>
</ul>
<div id="What" class="tab">
	<h2>What?</h2>
	<p>blabla</p>
</div>
<div id="Where" class="tab">
	<h2>Where?</h2>
	<p>blablbla</p>
</div>
<div id="Who" class="tab">
	<h2>Who?</h2>	
	<p>blabla</p>
</div>

Clear?