W3C.US

Before html5 and css3, the javascript development library would provide a plugin or package for web developer to implement Tab in the pages.You can refer to YUI or jQuery.

But now, we can use the target pseudo class to do this, no touching the javascript...

For example:

in HTML5:

<ul class="tabs">
	<li><a href="#tab1">Apple</a></li>
	<li><a href="#tab2">Blackberry</a></li>
	<li><a href="#tab3">Orange</a></li>
</ul>
<div id="tab1" class="tab_content">
<!--tabed content-->
This is an apple.
</div>
<div id="tab2" class="tab_content">
<!--tabed content-->
This is a blackberry.
</div>
<div id="tab3" class="tab_content">
<!--tabed content-->
This is an orange.
</div>

in CSS3:

/*layout styles*/
.tab_content {
	position: absolute;/*set content box as absolute*/
	/*other layout styles*/
}
#tab1:target, #tab2:target, #tab3:target {
	z-index: 1;
        /*let the target to front*/
 }

You can see the simple demo.

Is it easy enough?