<!-- HTML Markup Tabbed Element -->
<div id="tabs">
	<ul id="tab_nav">
		<li><a href="#tab1">Tab1 Title</a></li>
		<li><a href="#tab2">Tab2 Title</a></li>
	</ul>
	<div id="tab_contents">
		<div id="tab1" class="tab_content"><!-- Content here --></div>
		<div id="tab2" class="tab_content"><!-- Content here --></div>
	</div>
</div>
 
/* jQuery Tabbed Element
  - Avoid anonymous functions on load
  - $.fn.find with Id uses native document.getElementById()
  - $.fn.delegate eliminates the need for wasted selection
  - Cache selectors for optimisation
*/
var tabs = {
	init: function(){
		var $tab_contents = $('#tab_contents'), $tab_nav = $('#tab_nav');
		$tab_contents.find('div.tab_content:not(:first)').hide();
		$tab_nav.find('li:first').addClass('active');
		$tab_nav.delegate('li a', 'click', function(e){
			var activeTab = $(this).attr('href');
			$tab_nav.find('li').removeClass('active');
			$(this).parent().addClass('active');
			$tab_contents.find('div.tab_content').hide();
			$tab_contents.find(activeTab).fadeIn(250);
			e.preventDefault();
		});
	}
}
$(document).ready(tabs.init());

<!-- HTML Markup Tabbed Element -->
<div id="tabs">
	<ul id="tab_nav">
		<li><a href="#tab1">Tab1 Title</a></li>
		<li><a href="#tab2">Tab2 Title</a></li>
	</ul>
	<div id="tab_contents">
		<div id="tab1" class="tab_content"><!-- Content here --></div>
		<div id="tab2" class="tab_content"><!-- Content here --></div>
	</div>
</div>
 
/* jQuery Tabbed Element
  - Avoid anonymous functions on load
  - $.fn.find with Id uses native document.getElementById()
  - $.fn.delegate eliminates the need for wasted selection
  - Cache selectors for optimisation
*/
var tabs = {
	init: function(){
		var $tab_contents = $('#tab_contents'), $tab_nav = $('#tab_nav');
		$tab_contents.find('div.tab_content:not(:first)').hide();
		$tab_nav.find('li:first').addClass('active').show();
		$tab_nav.delegate('li a', 'click', function(e){
			var activeTab = $(this).attr('href');
			$tab_nav.find('li').removeClass('active');
			$(this).parent().addClass('active');
			$tab_contents.find('div.tab_content').hide();
			$tab_contents.find(activeTab).fadeIn(250);
			e.preventDefault();
		});
	}
}
$(document).ready(tabs.init());

var tabs = {
	init: function(){
		var $tab_contents = $('#tab_contents'), $tab_nav = $('#tab_nav');
		$tab_contents.find('div.tab_content:not(:first)').hide();
		$tab_nav.find('li:first').addClass('active').show();
		$tab_nav.delegate('li a', 'click', function(e){
			var activeTab = $(this).attr('href');
			$tab_nav.find('li').removeClass('active');
			$(this).parent().addClass('active');
			$tab_contents.find('div.tab_content').hide();
			$tab_contents.find(activeTab).fadeIn(250);
			e.preventDefault();
		});
	}
}
$(document).ready(tabs.init());

<!-- HTML Markup Tabbed Element -->
<div id="tabs">
	<ul id="tab_nav">
		<li><a href="#tab1">Tab1 Title</a></li>
		<li><a href="#tab2">Tab2 Title</a></li>
	</ul>
	<div id="tab_contents">
		<div id="tab1" class="tab_content"><!-- Content here --></div>
		<div id="tab2" class="tab_content"><!-- Content here --></div>
	</div>
</div>

/*  jQuery Tabbed Element
    - Avoid anonymous functions on load
    - $.fn.find with Id uses native document.getElementById()
    - $.fn.delegate eliminates the need for wasted selection
    - Cache selectors for optimisation
*/
var tabs = {
	init: function(){
		var $tab_contents = $('#tab_contents'), $tab_nav = $('#tab_nav');
	    $tab_contents.find('div.tab_content').hide();
	    $tab_nav.find('li:first').addClass('active').show();
	    $tab_contents.find('div.tab_content:first').show();
	    $tab_nav.delegate('li a', 'click', function(e){
	        e.preventDefault();
	        var activeTab = $(this).attr('href'); 
	        $tab_nav.find('li').removeClass('active');
	        $(this).parent().addClass('active');
	        $tab_contents.find('div.tab_content').hide();
	        $tab_contents.find(activeTab).fadeIn(250);
	    });
	}
}
$(document).ready(tabs.init);

jQuery Tabbed Element (CSS Not Included)

jQuery Tabbed Element

JavaScript