Simlest jquery rounded tabs with some css3

Written by Alex Wolkov

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.


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 ( 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));

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.