This is a solution for tabbed interface I wrote while working on a high profile project at work. It uses jQuery and about 3 lines of code to create it(plus some css+xtml). Very easy indeed.
I know there are a LOT of tab plugins avaliable out-there, I used them myself. A lot.
The problem was, I wanted a quick solution, without the bells and whiles of animation and FX. This is what came out.

SEE DEMO HERE

Step one : xHtml markup

I decided to use the most basic structure. 2 wrappers next to each other, one containing the actual tabs, the other the relative content to each tab. Both elements(tabs and content) receive the ‘active’ class when their are in fact active.

Tab1
Tab2
Tab3


Content 1
Content 2

some other content
Content 1

Step two : Css

I used a grid system (http://960.gs) to position and give widths to all the elements, beside that, I used some css3 techniques to beatify my tabs (rounded corners and shadow).
The actual css you use, isn’t important to the work of the tabz.

Step three : JAVASCRIPT

This is the reason why you are reading this, right? here you go:

//Tabz code - apply event to the tabs elements and your done
$('#tabz li').live('click',function(){
_index = $(this).parent().children().index($(this));
$(this).addClass('active').siblings().removeClass('active');
$('.cont').removeClass('active').eq(_index).addClass('active');
});

I select the tabs and assign them a click event listener, with the live() function.

Then I create an _index variable, that will tel me the index of the tab inside it’s parent.

By this _index I can now show the relevant content in the content div(the tabs and their content have to be the same index in their respective containers)

That’s it. Hope you can use this. If you do, don’t forget to comment here and show me your work.