Pinoy Tech

It has been a while since I’ve posted. Mostly because of studying and work. Here’s a code I just worked on in my spare time.

jQuery Tabs

I know, jQuery already has this tab plugin available in UI but I really wanted to create my own jQuery tabs without depending on the UI plugins. I also needed more control of the code. For example, I really needed one of the tabs not to function like a tab but more of a link to another page. So I started playing with jQuery and here’s what I got.

jQuery Javascript

$(document).ready(function(){
	$('div.menu-content > div').css('display', 'none');
	$('div.menu-content > div:first').css('display', 'block');
	$('ul.menu-nav > li:first > a').addClass('active');
	$('ul.menu-nav > li:first').addClass('active');

	$('ul.menu-nav > li:not(:first)').click(function(event) {
		event.preventDefault();
		var index = $('ul.menu-nav > li').index(this);
		$('div.menu-content > div').css('display', 'none');
		$('div.menu-content > div:eq('+index+')').css('display', 'block');
		$('ul.menu-nav > li').removeClass('active');
		$('ul.menu-nav > li:eq('+index+')').addClass('active');
		$('ul.menu-nav > li > a').removeClass('active');
		$('ul.menu-nav > li:eq('+index+') > a').addClass('active');
	});
});

Well, there you have it. I couldn’t paste the HTML and CSS here so I made a sample page just for this tutorial. The code for the jQuery tabs is easy as pie. I am sure there are more efficient ways to create these tabs but I guess this one works just fine.

View working sample here: jQuery Tabs without UI