Simple Jquery tabs

Hi, this is a simple example for jquery tabs. if you want any help please contact me from my website. http://www.hybridplanet.co.in

by Ashish Panwar

HTML

<ul id="MainTab" class="main_tab_wrapper">
    <li><a id="tab_1" class="tab_bg" href="javascript:{};" onclick="javascript:TabHandler('tab_1', 'cont_1');">HOME</a></li>
    <li><a id="tab_2" href="javascript:{};" onclick="javascript:TabHandler('tab_2', 'cont_2');">CONTACT</a></li>
    <li><a id="tab_3" href="javascript:{};" onclick="javascript:TabHandler('tab_3', 'cont_3');">ABOUT</a></li>
</ul>
<ul id="MainTab_Content" class="main_cont_wrapper">
    <li id="cont_1">This is home page</li>
    <li id="cont_2" style="display:none;">This is contact us page</li>
    <li id="cont_3" style="display:none;">This is about site page</li>
</ul>

CSS

body{
    font-family:Arial;
}
.main_tab_wrapper
, .main_cont_wrapper
{
    width:100%;
    margin:0px;
    padding:0px;
    list-style-type:none;
    display:block;
    vertical-align:top;
    overflow:hidden;
}

.main_cont_wrapper{
    height:200px
}
            
.main_tab_wrapper li
{
    float: left;
    vertical-align:top;
}
            
.main_tab_wrapper li a
{
    padding:20px;
    text-decoration:none;
    color:#990000;
    background-color:#EEE;
    display:block;
}            
            
.main_cont_wrapper li
{
    border-left:1px solid gray;
    border-right:1px solid gray;
    border-bottom:1px solid gray;
    width:500px;
    height:300px;
    color:#FFF;
    font-size:20px;
    background-color:#990000;
    padding:10px;
}
            
.tab_bg
{
    background-color:#990000 !important;
    color:#FFF !important;
}

JavaScript

function TabHandler(TabID, TabContentID) {
    //ON TAB CLICK
    $("#MainTab").find("li a").removeClass("tab_bg");
    $("#MainTab_Content").find("li").hide();

    $("#" + TabID).addClass("tab_bg");
    $("#" + TabContentID).show();
}