Generic jQuery tab navigation

jquery-tabs.html

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('ul.tab-nav li').click(function(e){
		var tab_id = jQuery(this).attr('id');
		jQuery('ul.tab-nav li').removeClass('active');
		$(this).addClass('active');
		jQuery('.tab-container div.tab').hide();
		jQuery('.tab-container div#' + tab_id + '-tab').show();
	});
	jQuery('ul.tab-nav li:first-child').trigger('click');
});
</script>


<div class="tab-container">
	<ul class="tab-nav">
		<li id="one">One Tab</li>
		<li id="two">Two Tabs</li>
		<li id="three">Three Tabs</li>
	</ul>
	<div class="tab" id="one-tab">
		test
	</div>
	<div class="tab" id="two-tab">
	        test 1
	</div>
	<div class="tab" id="three-tab">
	        test 2
	</div>
</div>