javascript code for tab functionality (jQuery)

Sometimes when designer provide the HTML for tabs, its simply a piece of HTML and writing the code of tabbing become the task of developer. Then developer try google to search for a readymade code of tabs and try to convert it to work with our HTML. Everyone knows that its a very tedious task. So, here is a simple solution for it:

Mostly desinger provide the following code for tabbing:
<div class="bgOTab">
    <ul id="olTab">
    <li class="open"><a href="#"><span>Tab 1</span></a></li>
    <li class=""><a href="#"><span>Tab 2</span></a></li>
    <li class=""><a href="#"><span>Tab 3</span></a></li>
    <li class=""><a href="#"><span>Tab 4</span></a></li>
    </ul>
</div>
<div class="clrAll spc20">&nbsp;</div>
<div id="olTxt">
</div>

The main working of this code should be that on clicking any <a> tag its corresponding div should be open, which should be in the '<div id="olTxt"></div>'. And after opening it, some changes of class name should happen. Like here active tab class name should be "open".

So, first we add some more HTML in this code. After adding this HTML code will be following:

<div class="bgOTab">
    <ul id="olTab">
    <li class="open"><a rel="tab1Div" href="#"><span>Tab 1</span></a></li>
    <li class=""><a rel="tab2Div" href="#"><span>Tab 2</span></a></li>
    <li class=""><a rel="tab3Div" href="#"><span>Tab 3</span></a></li>
    <li class=""><a rel="tab4Div" href="#"><span>Tab 4</span></a></li>
    </ul>
</div>
<div class="clrAll spc20">&nbsp;</div>
<div id="olTxt">
    <div id="tab1Div" style="display:none">
    </div>
    <div id="tab2Div" style="display:none">
    </div>
    <div id="tab3Div" style="display:none">
    </div>
    <div id="tab4Div" style="display:none">
    </div>
</div>

Here we have added a "rel" attribute in every anchor tag. The value it holds would be the ID of that <div> that should be open on clicking that <a> tag. For eg. first tab's rel value is "tab1Div". So after clicking this tab div with id="tab1Div" should be displya and other should get hidden. But how would this happen automatically? It would be because of following piece of javascript code:

function menuTabChanger(mainTab, activeClass, inactiveClass){
   $("#"+mainTab).find("a").each(function(i) {
     $(this).click(function(){
         $("#"+mainTab+" > li").removeClass(activeClass);
         $("#"+mainTab+" > li").addClass(inactiveClass);
         $(this).parents("li").removeClass(inactiveClass);
         $(this).parents("li").addClass(activeClass);
         var currRel = $(this).attr("rel");
           $("#"+mainTab).find("a").each(function(i) {
                   $('#'+$(this).attr("rel")).hide();
           });
         $('#'+currRel).show();
     });
   });
}

This function works with jQuery only. It takes 3 parameters. First is the id of main <ul> tag. Second one is the class name which should be apply on active tab and third one is the class name which should be apply on rest tabs. As in my code i don't need inactive class name so i have left it blank. You will call this function only once like following and rest it will take care automatically.

<script language="javascript">
menuTabChanger("olTab", "open", "");
</script>

Enjoy the tabbing :)
-Lalit