Create a Tab control using JQuery in ASP.NET

By using the below code we can make a simple JQuery tab control. In this example i am going to create two tab. When we click a tab a table will be hide and another table will be visible.

• Befor start coding download and add latest JQuery library and refer it in code like below inside head section.

<script src='js/common/jquery-1.9.1.js' ></script>

•  Then add the below JQuery code inside head section in ASP.NET HTML design page

<script type="text/javascript">
    $(document).ready(function () {
        $(".tabLink").each(function () {
            $(this).click(function () {
                tabeId = $(this).attr('id');
                $(".tabLink").removeClass("activeLink");
                $(this).addClass("activeLink");
                $(".tabcontent").addClass("hide");
                $("#" + tabeId + "-1").removeClass("hide")
                return false;
            });
        });
    });
 </script>

• Then add the below code in body section. This is actually a tab design.

<table cellpadding="0" cellspacing="0">
    <tr>
        <td class="contact_tab_box">
        <a href="javascript:;" class="tabLink activeLink" id="tab1">Tab1</a>
        <a href="javascript:;" class="tabLink " id="cont-2">Tab2</a>
        </td>
    </tr>
</table>

• Now we have to design two tables to work with the tab when we click it

<table width="100%" class="tabcontent" id="t1">
    <tr>
        <td>
        DO YOUR DESIGN HERE
        </td>
    </tr>
</table>


<table width="100%" class="tabcontent hide" id="t2">
    <tr>
        <td>
        DO YOUR DESIGN HERE
        </td>
    </tr>
</table>

• We need the below CSS for better design

.contact_tab_bar_left {
    background: #F2F2F2;
}

.contact_tab_bar_right {

    background: #F2F2F2;
    border-radius:0px 6px 6px 0px;
}

.contact_tab_box {
    background: #EEEEEE;
}

.contact_tab_box a {
    font-family:Arial;
    font-size:14px;
    border:1px solid #797979;
    color:#000;

    padding: 7px 30px;
    text-decoration:none;
    background-color: #eee;
    border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
}

.contact_tab_box a.activeLink {
    font-family:Arial;
    font-size:14px;
    font-weight: bold;
    background-color: #3F3F3F;
    color:#FFFFFF;
    border-bottom: 0;
    padding: 7px 30px;
    border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
}

.contact_tab_content {
    border: 1px solid #797979;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
.hide { display: none;}