Posted By

digitalclubb on 04/22/11

Tagged

Versions (?)

Last Edited at 04/22/11 01:46am

Statistics

Viewed 424 times

Favorited by 0 user(s)

Related snippets

jQuery Tabbed Element

/ Published in: JavaScript

jQuery Tabbed Element (CSS Not Included)

Highlighted TextExpand

<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"></div>
		<div id="tab2" class="tab_content"></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());

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.