Post
Ask Question

Tab Control in JavaScript

Introduction

 
Here we create a simple tab control in JavaScript. In this case, when we mouse over the tab it activates and we are able to see the contents.
 
Tab1.gif
 
Step 1: First we create a table for the tabs.
  1. <table style="width: 239px" border="1">  
  2. <tr>  
  3. <td id="td1" >Tab1</td>  
  4. <td id="td2>Tab2</td>  
  5. <td id="td3>Tab3</td>  
  6. <td id="td4">Tab4</td>  
  7. </tr>  
  8. </table> 
After that we create four tables for different tabs:
  1. <table border="1">  
  2. <td class="style2">  
  3. <table id="Table1" border="1" >  
  4. <tr><td class="style4">One</td></tr>  
  5. <tr><td class="style4">Two</td></tr>  
  6. <tr><td class="style4">Three</td></tr>  
  7. </table>  
  8. <table id="Table2" border="1" style="display:none;" >  
  9. <tr><td class="style4"><a href="http://www.yahoo.com">Yahoo</a></td></tr>  
  10. <tr><td class="style4"><a href="http://www.Google.com">Google</a></td></tr>  
  11.   
  12. </table>  
  13. <table id="Table3" border="1" style="display:none;" >  
  14. <tr><td class="style5">  
  15. <img alt="" src="Image/168241_1780007696922_1141309985_2052634_3074841_n.jpg"  
  16. style="height: 69px; width: 84px" /></td><td class="style4">1st </td></tr>  
  17. <tr><td class="style5">  
  18. <img alt="" src="Image/168488_1809301029237_1141309985_2105127_5934469_n.jpg"  
  19. style="height: 58px; width: 85px" /></td><td class="style4">2nd</td></tr>  
  20. <tr><td class="style5">  
  21. <img alt="" src="Image/180540_1801174706084_1141309985_2089035_3914864_n.jpg"  
  22. style="height: 50px; width: 82px" /></td><td class="style4">3rd</td></tr>  
  23. </table>  
  24. <table id="Table4" border="1" style="display:none;" >  
  25. <tr><td class="style4">First Heading</td></tr>  
  26. <tr><td class="style4">Second Heading</td></tr>  
  27. <tr><td class="style4">Third Heading</td></tr>  
  28. </table>  
  29. </td></tr>  
  30. </table> 
Note: Here we take an Image folder to store our images.
 
Step 2: Now we can write the JavaScript functions. We write it on the tabs (td elements).
  1. <td id="td1" onmouseover="Show1()"  onmouseout ="Hide1()" class="style1">Tab1</td>  
  2. <td id="td2" onmouseover="Show2()" onmouseout ="Hide2()" style="text-align: center"><b>Tab2</b></td>  
  3. <td  id="td3" onmouseover="Show3()" onmouseout ="Hide3()" class="style3">Tab3</td>  
  4. <td   id="td4" onmouseover="Show4()" onmouseout ="Hide4()" style="text-align: center"><b>Tab4</b></td> 
     
Show1(): Shows the particular tab content and changes the color of the tab.
 
Hide1(): Activates on the onmouseout event; sets the default color of each tab.
  1. <script language="javascript" type="text/javascript">  
  2.   
  3. function Show1() {  
  4.             document.getElementById('Table1').style.display = 'Block';  
  5.             document.getElementById('Table2').style.display = 'None';  
  6.             document.getElementById('Table3').style.display = 'None';  
  7.             document.getElementById('Table4').style.display = 'None';  
  8.             document.getElementById('td1').style.backgroundColor = "Red";  
  9.             document.getElementById('td1').style.color = "White";  
  10.   
  11.         }  
  12.         function Show2() {  
  13.             document.getElementById('Table1').style.display = 'None';  
  14.             document.getElementById('Table2').style.display = 'Block';  
  15.             document.getElementById('Table3').style.display = 'None';  
  16.             document.getElementById('Table4').style.display = 'None';  
  17.             document.getElementById('td2').style.backgroundColor = "Red";  
  18.             document.getElementById('td2').style.color = "White";  
  19.   
  20.         }  
  21.   
  22.         function Show4() {  
  23.             document.getElementById('Table1').style.display = 'None';  
  24.             document.getElementById('Table4').style.display = 'Block';  
  25.             document.getElementById('Table3').style.display = 'None';  
  26.             document.getElementById('Table2').style.display = 'None';  
  27.             document.getElementById('td4').style.backgroundColor = "Red";  
  28.             document.getElementById('td4').style.color = "White";  
  29.   
  30.         }  
  31.   
  32.         function Show3() {  
  33.             document.getElementById('Table1').style.display = 'None';  
  34.             document.getElementById('Table3').style.display = 'Block';  
  35.             document.getElementById('Table2').style.display = 'None';  
  36.             document.getElementById('Table4').style.display = 'None';  
  37.             document.getElementById('td3').style.backgroundColor = "Red";  
  38.             document.getElementById('td3').style.color = "White";  
  39.   
  40.         }  
  41.         function Hide1() {  
  42.             document.getElementById('td1').style.backgroundColor = "White";  
  43.             document.getElementById('td1').style.color = "Black";  
  44.   
  45.         }  
  46.         function Hide2() {  
  47.             document.getElementById('td2').style.backgroundColor = "White";  
  48.             document.getElementById('td2').style.color = "Black";  
  49.   
  50.         }  
  51.         function Hide3() {  
  52.             document.getElementById('td3').style.backgroundColor = "White";  
  53.             document.getElementById('td3').style.color = "Black";  
  54.   
  55.         }  
  56.         function Hide4() {  
  57.             document.getElementById('td4').style.backgroundColor = "White";  
  58.             document.getElementById('td4').style.color = "Black";  
  59.   
  60.         }  
  61.     </script> 
Note: Here we set the display property. It displays the table according to the Tab. At this time we set the display property of the other table to 'None'.
 
Complete Program
  1. <head runat="server">  
  2. <title></title>  
  3. <script language="javascript" type="text/javascript">  
  4.   
  5. function Show1() {  
  6. document.getElementById('Table1').style.display = 'Block';  
  7. document.getElementById('Table2').style.display = 'None';  
  8. document.getElementById('Table3').style.display = 'None';  
  9. document.getElementById('Table4').style.display = 'None';  
  10. document.getElementById('td1').style.backgroundColor = "Red";  
  11. document.getElementById('td1').style.color = "White";  
  12.   
  13. }  
  14. function Show2() {  
  15. document.getElementById('Table1').style.display = 'None';  
  16. document.getElementById('Table2').style.display = 'Block';  
  17. document.getElementById('Table3').style.display = 'None';  
  18. document.getElementById('Table4').style.display = 'None';  
  19. document.getElementById('td2').style.backgroundColor = "Red";  
  20. document.getElementById('td2').style.color = "White";  
  21.   
  22. }  
  23.   
  24. function Show4() {  
  25. document.getElementById('Table1').style.display = 'None';  
  26. document.getElementById('Table4').style.display = 'Block';  
  27. document.getElementById('Table3').style.display = 'None';  
  28. document.getElementById('Table2').style.display = 'None';  
  29. document.getElementById('td4').style.backgroundColor = "Red";  
  30. document.getElementById('td4').style.color = "White";  
  31.   
  32. }  
  33.   
  34. function Show3() {  
  35. document.getElementById('Table1').style.display = 'None';  
  36. document.getElementById('Table3').style.display = 'Block';  
  37. document.getElementById('Table2').style.display = 'None';  
  38. document.getElementById('Table4').style.display = 'None';  
  39. document.getElementById('td3').style.backgroundColor = "Red";  
  40. document.getElementById('td3').style.color = "White";  
  41.   
  42. }  
  43. function Hide1() {  
  44. document.getElementById('td1').style.backgroundColor = "White";  
  45. document.getElementById('td1').style.color = "Black";  
  46.   
  47. }  
  48. function Hide2() {  
  49. document.getElementById('td2').style.backgroundColor = "White";  
  50. document.getElementById('td2').style.color = "Black";  
  51.   
  52. }  
  53. function Hide3() {  
  54. document.getElementById('td3').style.backgroundColor = "White";  
  55. document.getElementById('td3').style.color = "Black";  
  56.   
  57. }  
  58. function Hide4() {  
  59. document.getElementById('td4').style.backgroundColor = "White";  
  60. document.getElementById('td4').style.color = "Black";  
  61.   
  62. }  
  63. </script>  
  64. <style type="text/css">  
  65. .style1  
  66. {  
  67. width: 45px;  
  68. text-align: center;  
  69. font-weight: bold;  
  70. }  
  71. .style2  
  72. {  
  73. width: 228px;  
  74. }  
  75. .style3  
  76. {  
  77. text-align: center;  
  78. font-weight: bold;  
  79. }  
  80. .style4  
  81. {  
  82. width: 232px;  
  83. text-align: center;  
  84. }  
  85. .style5  
  86. {  
  87. width: 90px;  
  88. text-align: center;  
  89. }  
  90. </style>  
  91. </head>  
  92. <body>  
  93. <form id="form1" runat="server">  
  94. <div>  
  95. <table style="width: 239px" border="1">  
  96. <tr>  
  97. <td id="td1" onmouseover="Show1()"  onmouseout ="Hide1()" class="style1">Tab1</td>  
  98. <td id="td2" onmouseover="Show2()" onmouseout ="Hide2()" style="text-align: center"><b>Tab2</b></td>  
  99. <td  id="td3" onmouseover="Show3()" onmouseout ="Hide3()" class="style3">Tab3</td>  
  100. <td   id="td4" onmouseover="Show4()" onmouseout ="Hide4()" style="text-align: center"><b>Tab4</b></td>  
  101. </tr>  
  102. </table>  
  103. <table border="1">  
  104. <tr>  
  105.   
  106. <td class="style2">  
  107. <table id="Table1" border="1" >  
  108. <tr><td class="style4">One</td></tr>  
  109. <tr><td class="style4">Two</td></tr>  
  110. <tr><td class="style4">Three</td></tr>  
  111. </table>  
  112. <table id="Table2" border="1" style="display:none;" >  
  113. <tr><td class="style4"><a href="http://www.yahoo.com">Yahoo</a></td></tr>  
  114. <tr><td class="style4"><a href="http://www.Google.com">Google</a></td></tr>  
  115.   
  116. </table>  
  117. <table id="Table3" border="1" style="display:none;" >  
  118. <tr><td class="style5">  
  119. <img alt="" src="Image/168241_1780007696922_1141309985_2052634_3074841_n.jpg"  
  120. style="height: 69px; width: 84px" /></td><td class="style4">1st </td></tr>  
  121. <tr><td class="style5">  
  122. <img alt="" src="Image/168488_1809301029237_1141309985_2105127_5934469_n.jpg"  
  123. style="height: 58px; width: 85px" /></td><td class="style4">2nd</td></tr>  
  124. <tr><td class="style5">  
  125. <img alt="" src="Image/180540_1801174706084_1141309985_2089035_3914864_n.jpg"  
  126. style="height: 50px; width: 82px" /></td><td class="style4">3rd</td></tr>  
  127. </table>  
  128. <table id="Table4" border="1" style="display:none;" >  
  129. <tr><td class="style4">First Heading</td></tr>  
  130. <tr><td class="style4">Second Heading</td></tr>  
  131. <tr><td class="style4">Third Heading</td></tr>  
  132. </table>  
  133. </td></tr>  
  134. </table>  
  135. </div>  
  136. </form>  
  137. </body> 


Similar Articles