JavaScript

How to Create Tabs and Other Properties of JavaScript

Introduction

 
In this article, we will discuss how to create tabs and work with other features of JavaScript. So first we will create tabs like this: 
 
First, we create a table and create two tables in it. One for the tabs and another one is for its contents.
  1. <table width="560pt" cellpadding="0" cellspacing="0">  
  2. <tr>  
  3. <td id="tdtopic1" align="center" style="border:1px solid black;" onmouseover="ShowTopic1()" >Topic1</td>}  
  4. <td id="tdtopic2" align="center" style="border:1px solid black" onmouseover="ShowTopic2()">Topic2</td>  
  5. <td id="tdtopic3" align="center" style="border:1px solid black" onmouseover="ShowTopic3()">Topic3</td>  
  6. </tr>  
  7. </table>  
  8. <table cellpadding="0" cellspacing="0" width="560pt" height="300pt" style="border:1px solid black;border-top:none;">  
  9. </table> 
     
Here we define the JavaScript function, this is because when we hover over the tab it changes its color and content.
  1. function ShowTopic1()  
  2. {  
  3. document.getElementById('tdtopic1').style.backgroundColor='Gray';  
  4. document.getElementById('table1').style.display='block';  
  5. document.getElementById('table2').style.display='none';  
  6. document.getElementById('tdtopic2').style.backgroundColor='White';  
  7. document.getElementById('tdtopic3').style.backgroundColor='White';  
  8. }  
  9. function ShowTopic2()  
  10. {  
  11. document.getElementById('tdtopic2').style.backgroundColor='Gray';  
  12. document.getElementById('table2').style.display='block';  
  13. document.getElementById('table1').style.display='none';  
  14. document.getElementById('tdtopic1').style.backgroundColor='White';  
  15. document.getElementById('tdtopic3').style.backgroundColor='White';  
  16. }  
  17. function ShowTopic3()  
  18. {  
  19. document.getElementById('tdtopic3').style.backgroundColor='Gray';  
  20. document.getElementById('table1').style.display='block';  
  21. document.getElementById('table1').style.display='none';  
  22. document.getElementById('table2').style.display='none';  
  23.    
  24. document.getElementById('tdtopic2').style.backgroundColor='White';  
  25. document.getElementById('tdtopic1').style.backgroundColor='White';  
  26. } 
Here we use two tables; we will discuss them later.
 
The output will be:
 
Tabs1.jpg
 
Now we will create a table for the First Tab (Topic1):
  1. <table cellpadding="0" cellspacing="0" width="300pt" id="table1" style="border:1px solid black">  
  2. <table cellpadding="0" cellspacing="0" width="150pt" >  
  3. <tr><td id="tditem1" style="border:1px solid black" onmouseover="Show1()">Item1</td></tr>  
  4. <tr><td id="tditem2" style="border:1px solid black" onmouseover="Show2()">Item2</td></tr>  
  5. <tr><td id="tditem3" style="border:1px solid black" onmouseover="Show3()">Item3</td></tr>  
  6. <tr><td id="tditem4" style="border:1px solid black" onmouseover="Show4()">Item4</td></tr>  
  7. </table>  
  8. </td>  
  9. <td id="tdmain" width="150pt" align="center" style="border:1px solid black">  
  10. Mahak  
  11. </td>  
  12. </tr>  
  13. </table> 
Now we write the js functions for this:
  1. <script language="javascript">  
  2.     function Show1() {  
  3.         document.getElementById('tditem1').style.backgroundColor = 'Red';  
  4.         document.getElementById('tdmain').innerHTML = 'Item1';  
  5.         document.getElementById('tditem2').style.backgroundColor = 'White';  
  6.         document.getElementById('tditem3').style.backgroundColor = 'White';  
  7.         document.getElementById('tditem4').style.backgroundColor = 'White';  
  8.    
  9.     }  
  10.    
  11.     function Show2() {  
  12.         document.getElementById('tditem2').style.backgroundColor = 'Blue';  
  13.         document.getElementById('tdmain').innerHTML = 'Item2';  
  14.         document.getElementById('tditem1').style.backgroundColor = 'White';  
  15.         document.getElementById('tditem3').style.backgroundColor = 'White';  
  16.         document.getElementById('tditem4').style.backgroundColor = 'White';  
  17.    
  18.     }  
  19.    
  20.     function Show3() {  
  21.         document.getElementById('tditem3').style.backgroundColor = 'Green';  
  22.         document.getElementById('tdmain').innerHTML = 'Item4';  
  23.         document.getElementById('tditem2').style.backgroundColor = 'White';  
  24.         document.getElementById('tditem1').style.backgroundColor = 'White';  
  25.         document.getElementById('tditem4').style.backgroundColor = 'White';  
  26.    
  27.     }  
  28.    
  29.     function Show4() {  
  30.         document.getElementById('tditem4').style.backgroundColor = 'Purple';  
  31.         document.getElementById('tdmain').innerHTML = 'Item4';  
  32.         document.getElementById('tditem2').style.backgroundColor = 'White';  
  33.         document.getElementById('tditem3').style.backgroundColor = 'White';  
  34.         document.getElementById('tditem1').style.backgroundColor = 'White';  
  35.    
  36.     }  
  37. </script> 
By this when we hover over the Item1 the output will be:
 
Tabs2.jpg
 
And on Item 2
 
Tabs3.jpg
 
Now we create another Table for the second Tab (Topic2):
  1. <table id="table2" cellpadding="0" cellspacing="0" Height="150pt" width="400pt" >  
  2. <tr>  
  3. <td ><img id="img1" width="100pt" height="100pt" src="2.jpg" onmouseover="ShowImg1()" /></td>  
  4. <td ><img id="img2" width="100pt" height="100pt" src="3.jpg" onmouseover="ShowImg2()" /></td>  
  5. <td ><img id="img3" width="100pt" height="100pt" src="4.jpg" onmouseover="ShowImg3()" /></td>  
  6. </tr>  
  7. </table> 
Now we write the JavaScript function for this:
  1. function ShowImg1()  
  2. {  
  3.   
  4. document.getElementById('img1').style.height='120pt';  
  5. document.getElementById('img1').style.width='120pt';  
  6. document.getElementById('img2').style.height='100pt';  
  7. document.getElementById('img2').style.width='100pt';  
  8. document.getElementById('img3').style.height='100pt';  
  9. document.getElementById('img3').style.width='100pt';  
  10. }  
  11.   
  12. function ShowImg2()  
  13. {  
  14. document.getElementById('img2').style.height='120pt';  
  15. document.getElementById('img2').style.width='120pt';  
  16. document.getElementById('img1').style.height='100pt';  
  17. document.getElementById('img1').style.width='100pt';  
  18. document.getElementById('img3').style.height='100pt';  
  19. document.getElementById('img3').style.width='100pt';  
  20. }  
  21.   
  22. function ShowImg3()  
  23. {  
  24. document.getElementById('img3').style.height='120pt';  
  25. document.getElementById('img3').style.width='120pt';  
  26. document.getElementById('img1').style.height='100pt';  
  27. document.getElementById('img1').style.width='100pt';  
  28. document.getElementById('img2').style.height='100pt';  
  29. document.getElementById('img2').style.width='100pt';  
  30. } 
With the help of this, when we hover the mouse over the images the size of the images will change like this:
 
Tabs4.jpg
 
Tabs5.jpg
 
Note: When we write the code for Tabs we set the Tables (table1 and table2) property to none. So when we click on the first tab table1 will be displayed and when we click on tab2 table2 will be displayed.
  1. function ShowTopic1()  
  2. {  
  3. document.getElementById('tdtopic1').style.backgroundColor='Gray';  
  4. document.getElementById('table1').style.display='block';  
  5. document.getElementById('table2').style.display='none';  
  6. document.getElementById('tdtopic2').style.backgroundColor='White';  
  7. document.getElementById('tdtopic3').style.backgroundColor='White';  
  8. }  
  9. function ShowTopic2()  
  10. {  
  11. document.getElementById('tdtopic2').style.backgroundColor='Gray';  
  12. document.getElementById('table2').style.display='block';  
  13. document.getElementById('table1').style.display='none';  
  14. document.getElementById('tdtopic1').style.backgroundColor='White';  
  15. document.getElementById('tdtopic3').style.backgroundColor='White';  
  16. } 
Complete Program
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4.     <title>New Document </title>  
  5. </head>  
  6. <script language="javascript">  
  7.     function Show1() {  
  8.         document.getElementById('tditem1').style.backgroundColor = 'Red';  
  9.         document.getElementById('tdmain').innerHTML = 'Item1';  
  10.         document.getElementById('tditem2').style.backgroundColor = 'White';  
  11.         document.getElementById('tditem3').style.backgroundColor = 'White';  
  12.         document.getElementById('tditem4').style.backgroundColor = 'White';  
  13.    
  14.     }  
  15.    
  16.     function Show2() {  
  17.         document.getElementById('tditem2').style.backgroundColor = 'Blue';  
  18.         document.getElementById('tdmain').innerHTML = 'Item2';  
  19.         document.getElementById('tditem1').style.backgroundColor = 'White';  
  20.         document.getElementById('tditem3').style.backgroundColor = 'White';  
  21.         document.getElementById('tditem4').style.backgroundColor = 'White';  
  22.    
  23.     }  
  24.    
  25.     function Show3() {  
  26.         document.getElementById('tditem3').style.backgroundColor = 'Green';  
  27.         document.getElementById('tdmain').innerHTML = 'Item4';  
  28.         document.getElementById('tditem2').style.backgroundColor = 'White';  
  29.         document.getElementById('tditem1').style.backgroundColor = 'White';  
  30.         document.getElementById('tditem4').style.backgroundColor = 'White';  
  31.    
  32.     }  
  33.    
  34.     function Show4() {  
  35.         document.getElementById('tditem4').style.backgroundColor = 'Purple';  
  36.         document.getElementById('tdmain').innerHTML = 'Item4';  
  37.         document.getElementById('tditem2').style.backgroundColor = 'White';  
  38.         document.getElementById('tditem3').style.backgroundColor = 'White';  
  39.         document.getElementById('tditem1').style.backgroundColor = 'White';  
  40.    
  41.     }  
  42.     function ShowTopic1() {  
  43.         document.getElementById('tdtopic1').style.backgroundColor = 'Gray';  
  44.         document.getElementById('table1').style.display = 'block';  
  45.         document.getElementById('table2').style.display = 'none';  
  46.         document.getElementById('tdtopic2').style.backgroundColor = 'White';  
  47.         document.getElementById('tdtopic3').style.backgroundColor = 'White';  
  48.     }  
  49.     function ShowTopic2() {  
  50.         document.getElementById('tdtopic2').style.backgroundColor = 'Gray';  
  51.         document.getElementById('table2').style.display = 'block';  
  52.         document.getElementById('table1').style.display = 'none';  
  53.         document.getElementById('tdtopic1').style.backgroundColor = 'White';  
  54.         document.getElementById('tdtopic3').style.backgroundColor = 'White';  
  55.     }  
  56.     function ShowTopic3() {  
  57.         document.getElementById('tdtopic3').style.backgroundColor = 'Gray';  
  58.         document.getElementById('table1').style.display = 'block';  
  59.         document.getElementById('table1').style.display = 'none';  
  60.         document.getElementById('table2').style.display = 'none';  
  61.    
  62.    
  63.         document.getElementById('tdtopic2').style.backgroundColor = 'White';  
  64.         document.getElementById('tdtopic1').style.backgroundColor = 'White';  
  65.     }  
  66.     function ShowImg1() {  
  67.    
  68.         document.getElementById('img1').style.height = '120pt';  
  69.         document.getElementById('img1').style.width = '120pt';  
  70.         document.getElementById('img2').style.height = '100pt';  
  71.         document.getElementById('img2').style.width = '100pt';  
  72.         document.getElementById('img3').style.height = '100pt';  
  73.         document.getElementById('img3').style.width = '100pt';  
  74.     }  
  75.    
  76.     function ShowImg2() {  
  77.         document.getElementById('img2').style.height = '120pt';  
  78.         document.getElementById('img2').style.width = '120pt';  
  79.         document.getElementById('img1').style.height = '100pt';  
  80.         document.getElementById('img1').style.width = '100pt';  
  81.         document.getElementById('img3').style.height = '100pt';  
  82.         document.getElementById('img3').style.width = '100pt';  
  83.     }  
  84.    
  85.     function ShowImg3() {  
  86.         document.getElementById('img3').style.height = '120pt';  
  87.         document.getElementById('img3').style.width = '120pt';  
  88.         document.getElementById('img1').style.height = '100pt';  
  89.         document.getElementById('img1').style.width = '100pt';  
  90.         document.getElementById('img2').style.height = '100pt';  
  91.         document.getElementById('img2').style.width = '100pt';  
  92.    
  93.    
  94.     }  
  95.    
  96. </script>  
  97. <body>  
  98.     <div>  
  99.         <table width="560pt" cellpadding="0" cellspacing="0">  
  100.             <tr>  
  101.                 <td id="tdtopic1" align="center" style="border: 1px solid black;" onmouseover="ShowTopic1()">  
  102.                     Topic1  
  103.                 </td>  
  104.                 <td id="tdtopic2" align="center" style="border: 1px solid black" onmouseover="ShowTopic2()">  
  105.                     Topic2  
  106.                 </td>  
  107.                 <td id="tdtopic3" align="center" style="border: 1px solid black" onmouseover="ShowTopic3()">  
  108.                     Topic3  
  109.                 </td>  
  110.             </tr>  
  111.         </table>  
  112.         <table cellpadding="0" cellspacing="0" width="560pt" height="300pt" style="border: 1px solid black;  
  113.             border-top: none;">  
  114.             <tr>  
  115.                 <td align="center">  
  116.                     <table cellpadding="0" cellspacing="0" width="300pt" id="table1" style="border: 1px solid black">  
  117.                         <tr>  
  118.                             <td>  
  119.                                 <table cellpadding="0" cellspacing="0" width="150pt">  
  120.                                     <tr>  
  121.                                         <td id="tditem1" style="border: 1px solid black" onmouseover="Show1()">  
  122.                                             Item1  
  123.                                         </td>  
  124.                                     </tr>  
  125.                                     <tr>  
  126.                                         <td id="tditem2" style="border: 1px solid black" onmouseover="Show2()">  
  127.                                             Item2  
  128.                                         </td>  
  129.                                     </tr>  
  130.                                     <tr>  
  131.                                         <td id="tditem3" style="border: 1px solid black" onmouseover="Show3()">  
  132.                                             Item3  
  133.                                         </td>  
  134.                                     </tr>  
  135.                                     <tr>  
  136.                                         <td id="tditem4" style="border: 1px solid black" onmouseover="Show4()">  
  137.                                             Item4  
  138.                                         </td>  
  139.                                     </tr>  
  140.                                 </table>  
  141.                             </td>  
  142.                             <td id="tdmain" width="150pt" align="center" style="border: 1px solid black">  
  143.                                 Mahak  
  144.                             </td>  
  145.                         </tr>  
  146.                     </table>  
  147.                     <table id="table2" cellpadding="0" cellspacing="0" height="150pt" width="400pt">  
  148.                         <tr>  
  149.                             <td>  
  150.                                 <img id="img1" width="100pt" height="100pt" src="2.jpg" onmouseover="ShowImg1()" />  
  151.                             </td>  
  152.                             <td>  
  153.                                 <img id="img2" width="100pt" height="100pt" src="3.jpg" onmouseover="ShowImg2()" />  
  154.                             </td>  
  155.                             <td>  
  156.                                 <img id="img3" width="100pt" height="100pt" src="4.jpg" onmouseover="ShowImg3()" />  
  157.                             </td>  
  158.                         </tr>  
  159.                     </table>  
  160.                 </td>  
  161.             </tr>  
  162.         </table>  
  163.     </div>  
  164. </body>  
  165. </html> 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found