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;}