I am writing this tutorial for myself really because I need to reference this. This is a place for me to do that in a single place.

Add this in the <head> tag: 
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		//Default Action
		$(".tab_content").hide(); //Hide all content
		$("ul.tabs li:first").addClass("active").show(); //Activate some tab
		$(".tab_content:first").show(); //Show some tab content
		//On Click Event
		$("ul.tabs li").click(function() {
			$("ul.tabs li").removeClass("active"); //Remove any "active" class
			$(this).addClass("active"); //Add "active" class to selected tab
			$(".tab_content").hide(); //Hide all tab content
			var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
			$(activeTab).show(); //Fade in the active content
			return false;
		});
	});
</script>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
Add this in the page you wish the tabs to be in: 
<!-- Define Tabs -->
<ul class="tabs">
	<li><a href="#one">Tab 1</a></li>
	<li><a href="#two">Tab 2</a></li>
	<li><a href="#three">Tab 3</a></li>
	<li><a href="#four">Tab 4</a></li>
</ul>

<!-- Tab Content -->
<div class="tab_container">
	<div id="one" class="tab_content">
		Test on one
	</div>
	<div id="two" class="tab_content">
		Test on two
	</div>
	<div id="three" class="tab_content">
		Test on three
	</div>
	<div id="four" class="tab_content">
		Test on four
	</div>
</div>
And finally add this to the CSS document: 
/*---- Tabs: tab definition ----*/
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	border-left: 1px solid #8DAD86;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	border: 1px solid #8DAD86;
	border-left: none;
	margin-bottom: -1px;
	overflow: hidden;
	position: relative;
	background: #8DAD86;
}
ul.tabs li a {
	text-decoration: none;
	color: #02101C;
	display: block;
	padding: 0 20px;
	border: 1px solid #8DAD86;
	outline: none;
}
ul.tabs li a:hover {
	background: #4C7A49;
	text-decoration: none;
	color: #02101C;
}
/*---- Tabs: html definition ----*/
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #4C7A49;
	border-bottom: 1px solid #8DAD86; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
	border: 2px solid #8DAD86;
	border-top: 2px solid #8DAD86;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
}
.tab_content {
	padding: 0px 5px;
}