Simple jQuery Show/Hide Tabs

showhidetabs.html

<ul id="slidecontrols">
	<li><a href="#one">One</li>
	<li><a href="#two">Two</li>
</ul>

<div id="slides">
	<div>This is content block One</div>
	<div>This is content block Two</div>
</div>

showhidetabs.js

$(document).ready(function() {

	//Set the initial state: highlight the first button...
	$('#slidecontrols').find('li:eq(0)').addClass('selected');

	//and hide all slides except the first one
	$('#slides').find('> div:eq(0)').nextAll().hide();

	//actions that apply on click of any of the buttons
	$('#slidecontrols li').click( function(event) {

		//turn off the link so it doesn't try to jump down the page
		event.preventDefault();

		//un-highlight the buttons
		$('#slidecontrols li').removeClass();

		//hide all the slides
		$('#slides > div').hide();

		//highlight the current button
		$(this).addClass('selected');

		//get the index of the current button...
		var index = $('#slidecontrols li').index(this);

		//and use that index to show the corresponding slide
		$('#slides > div:eq('+index+')').show();

	});

});