jQuery: Tabs

Adding tabbed content is a great way to organise a page.
Below is the code to get you started

HTML

<ul class="tabs">
	<li data-tab="tab_1" class="current">Tab 1</li>
	<li data-tab="tab_2">Tab 2</li>
	<li data-tab="tab_3">Tab 3</li>
</ul>

<div class="tab_box">
	<div id="tab_1" class="tab_content">Tab 1 content</div>
	<div id="tab_2" class="tab_content">Tab 2 content</div>
	<div id="tab_3" class="tab_content">Tab 3 content</div>
</div>

Javascript

$('ul.tabs li').click(function() {
	var tab_id = $(this).attr('data-tab');
	
	$('ul.tabs li').removeClass('current');
	$('.tab_content').removeClass('current');
	
	$(this).addClass('current');
	$("#"+tab_id).addClass('current');
});

CSS

ul.tabs { display: block;}
ul.tabs li { display: inline-block; padding: 10px 20px;}
ul.tabs li.current { background: #ccc;}

.tab_content { display: none;}
.tab_content.current { display: inherit;}