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