$(function () {

var alltabs = $('div.tab');         //selector for all the tabs
var tabs = $('#tabs');              //selector for the tab menu
alltabs.first().show();             //show the first tab
tabs.find('li:first').addClass('on');       //add class 'on' to the first li to set the item to active

tabs.find('a').live('click', function() {
alltabs.hide()
tabs.find('li').removeClass('on')
$(this).parent().toggleClass('on')
var tabref = $(this).attr('rel')
$(tabref).fadeIn(500)
this.blur()
return false;
})

}); //end domready

http://byme.se/jquery/jquery-simple-tabs.html

CSS

#tabs { width:100%;height:40px; }
#tabs li { float:left;margin-right:5px; }
#tabs li a {  display:block; padding:3px 6px; text-decoration:none;  }
#tabs li.on a { background:#DF29B9;color:#fff; } /* background for active tab */
.tab { display:none; } /* hide tabs */
.tab { border:1px solid #ddd;padding:15px;border-bottom:2px solid; }


XHTML

<ul>
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Tab 4</a></li>
    <li><a href="#">Tab 5</a></li>
</ul>
<div>
<h2>Tab 1 contents</h2>
Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste

</div>
<div>
<h2>Tab 2 contents</h2>
Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste

</div>
<div>
<h2>Tab 3 contents</h2>
Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste

</div>
<div>
<h2>Tab 4 contents</h2>
Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste

</div>
<div>
<h2>Tab 5 contents</h2>
Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste

</div>

simple tab interface

jQuery