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