ARTICLE

Tab Control in JavaScript

Posted by Mahak Gupta in Articles | JavaScript, CSS on June 28, 2011

Tags: Beginner, Client side scripting, Dev, Free source code, how to use Tab Control In JavaScript, JavaScript, Tab Control, Tab Control In JavaScript, tutorials, VC6, Visual-Studio, Web Development, Win2K

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.

Tweet
13946
1

Reader Level: Beginner

Download Files:

Tab Control In JavaScript.rar

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.

Step 1: First we create a table for the tabs.

<table style="width: 239px" border="1">
<tr>
<td id="td1" >Tab1</td>
<td id="td2>Tab2</td>
<td id="td3>Tab3</td>
<td id="td4">Tab4</td>
</tr>
</table>

After that we create four tables for different tabs:

<table border="1">
<td class="style2">
<table id="Table1" border="1" >
<tr><td class="style4">One</td></tr>
<tr><td class="style4">Two</td></tr>
<tr><td class="style4">Three</td></tr>
</table>
<table id="Table2" border="1" style="display:none;" >
<tr><td class="style4"><a href="http://www.yahoo.com">Yahoo</a></td></tr>
<tr><td class="style4"><a href="http://www.Google.com">Google</a></td></tr>

</table>
<table id="Table3" border="1" style="display:none;" >
<tr><td class="style5">
<img alt="" src="Image/168241_1780007696922_1141309985_2052634_3074841_n.jpg"
style="height: 69px; width: 84px" /></td><td class="style4">1st </td></tr>
<tr><td class="style5">
<img alt="" src="Image/168488_1809301029237_1141309985_2105127_5934469_n.jpg"
style="height: 58px; width: 85px" /></td><td class="style4">2nd</td></tr>
<tr><td class="style5">
<img alt="" src="Image/180540_1801174706084_1141309985_2089035_3914864_n.jpg"
style="height: 50px; width: 82px" /></td><td class="style4">3rd</td></tr>
</table>
<table id="Table4" border="1" style="display:none;" >
<tr><td class="style4">First Heading</td></tr>
<tr><td class="style4">Second Heading</td></tr>
<tr><td class="style4">Third Heading</td></tr>
</table>
</td></tr>
</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).

<td id="td1" onmouseover="Show1()" onmouseout ="Hide1()" class="style1">Tab1</td>
<td id="td2" onmouseover="Show2()" onmouseout ="Hide2()" style="text-align: center"><b>Tab2</b></td>
<td id="td3" onmouseover="Show3()" onmouseout ="Hide3()" class="style3">Tab3</td>
<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.

<script language="javascript" type="text/javascript">

function Show1() {
            document.getElementById('Table1').style.display = 'Block';
            document.getElementById('Table2').style.display = 'None';
            document.getElementById('Table3').style.display = 'None';
            document.getElementById('Table4').style.display = 'None';
            document.getElementById('td1').style.backgroundColor = "Red";
            document.getElementById('td1').style.color = "White";

        }
        function Show2() {
            document.getElementById('Table1').style.display = 'None';
            document.getElementById('Table2').style.display = 'Block';
            document.getElementById('Table3').style.display = 'None';
            document.getElementById('Table4').style.display = 'None';
            document.getElementById('td2').style.backgroundColor = "Red";
            document.getElementById('td2').style.color = "White";

}

        function Show4() {
            document.getElementById('Table1').style.display = 'None';
            document.getElementById('Table4').style.display = 'Block';
            document.getElementById('Table3').style.display = 'None';
            document.getElementById('Table2').style.display = 'None';
            document.getElementById('td4').style.backgroundColor = "Red";
            document.getElementById('td4').style.color = "White";

}

        function Show3() {
            document.getElementById('Table1').style.display = 'None';
            document.getElementById('Table3').style.display = 'Block';
            document.getElementById('Table2').style.display = 'None';
            document.getElementById('Table4').style.display = 'None';
            document.getElementById('td3').style.backgroundColor = "Red";
            document.getElementById('td3').style.color = "White";

        }
        function Hide1() {
            document.getElementById('td1').style.backgroundColor = "White";
            document.getElementById('td1').style.color = "Black";

        }
        function Hide2() {
            document.getElementById('td2').style.backgroundColor = "White";
            document.getElementById('td2').style.color = "Black";

        }
        function Hide3() {
            document.getElementById('td3').style.backgroundColor = "White";
            document.getElementById('td3').style.color = "Black";

        }
        function Hide4() {
            document.getElementById('td4').style.backgroundColor = "White";
            document.getElementById('td4').style.color = "Black";

}
</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:

<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">

function Show1() {
document.getElementById('Table1').style.display = 'Block';
document.getElementById('Table2').style.display = 'None';
document.getElementById('Table3').style.display = 'None';
document.getElementById('Table4').style.display = 'None';
document.getElementById('td1').style.backgroundColor = "Red";
document.getElementById('td1').style.color = "White";

}
function Show2() {
document.getElementById('Table1').style.display = 'None';
document.getElementById('Table2').style.display = 'Block';
document.getElementById('Table3').style.display = 'None';
document.getElementById('Table4').style.display = 'None';
document.getElementById('td2').style.backgroundColor = "Red";
document.getElementById('td2').style.color = "White";

}

function Show4() {
document.getElementById('Table1').style.display = 'None';
document.getElementById('Table4').style.display = 'Block';
document.getElementById('Table3').style.display = 'None';
document.getElementById('Table2').style.display = 'None';
document.getElementById('td4').style.backgroundColor = "Red";
document.getElementById('td4').style.color = "White";

}

function Show3() {
document.getElementById('Table1').style.display = 'None';
document.getElementById('Table3').style.display = 'Block';
document.getElementById('Table2').style.display = 'None';
document.getElementById('Table4').style.display = 'None';
document.getElementById('td3').style.backgroundColor = "Red";
document.getElementById('td3').style.color = "White";

}
function Hide1() {
document.getElementById('td1').style.backgroundColor = "White";
document.getElementById('td1').style.color = "Black";

}
function Hide2() {
document.getElementById('td2').style.backgroundColor = "White";
document.getElementById('td2').style.color = "Black";

}
function Hide3() {
document.getElementById('td3').style.backgroundColor = "White";
document.getElementById('td3').style.color = "Black";

}
function Hide4() {
document.getElementById('td4').style.backgroundColor = "White";
document.getElementById('td4').style.color = "Black";

}
</script>
<style type="text/css">
.style1
{
width: 45px;
text-align: center;
font-weight: bold;
}
.style2
{
width: 228px;
}
.style3
{
text-align: center;
font-weight: bold;
}
.style4
{
width: 232px;
text-align: center;
}
.style5
{
width: 90px;
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 239px" border="1">
<tr>
<td id="td1" onmouseover="Show1()" onmouseout ="Hide1()" class="style1">Tab1</td>
<td id="td2" onmouseover="Show2()" onmouseout ="Hide2()" style="text-align: center"><b>Tab2</b></td>
<td id="td3" onmouseover="Show3()" onmouseout ="Hide3()" class="style3">Tab3</td>
<td id="td4" onmouseover="Show4()" onmouseout ="Hide4()" style="text-align: center"><b>Tab4</b></td>
</tr>
</table>
<table border="1">
<tr>

<td class="style2">
<table id="Table1" border="1" >
<tr><td class="style4">One</td></tr>
<tr><td class="style4">Two</td></tr>
<tr><td class="style4">Three</td></tr>
</table>
<table id="Table2" border="1" style="display:none;" >
<tr><td class="style4"><a href="http://www.yahoo.com">Yahoo</a></td></tr>
<tr><td class="style4"><a href="http://www.Google.com">Google</a></td></tr>

Article Extensions

Contents added by Elango N on Jun 11, 2012

This Feature is Sponsored By

DynamicPDF Merger is a developers dream for interacting with any existing PDF documents. Merge, append, split, form fill, flatten stamp and so much more.

post comment

Good work, thanks

Posted by Rohatash Kumar on Jun 29, 2011

COMMENT USING

PREMIUM SPONSORS

iPhone, Android & Web Development Services

Over-C is a holistic consortium of communications and technology specialists. We build, deploy and market both business as well as consumer products and solutions.

TRENDING UP

Create Outlook Add-in by MAPI Functionality by Using Visual Studio 2010 Outlook Project Debugging jQuery in ASP.NET How to Enable Sign in as Different User Option in SharePoint 2013 Top 10 HTML5 Interview Questions Find and Delete Duplicate Records From SQL Table Panel Default Button is Not Working For Rad Combobox Custom Paging With GridView in ASP.NET 4.5 Working With Database in HTML5 Extending WinJS ListView With Custom Item Events Encrypt and Decrypt in SQL Server: Part 2

View All

MOST LIKED ARTICLE

WCF Introduction and Contracts - Day 1 Create SSRS Report Using Report Wizard CREATE READ UPDATE and DELETE - CRUD Operation Using LINQ to SQL WCF - Data Contract - Day 4 Factory Design Pattern

Follow @twitterapi

Options	Votes	%
Lenovo	19	13.19
HP	6	4.17
Dell	17	11.81
Toshiba	54	37.50
Acer	43	29.86
Sony	5	3.47
Total	144	100%

In Focus

Tab Control in JavaScript

Related Articles


Favorite Computer Manufacturer

Who is your favorite Computer manufacturer?

Lenovo HP Dell Toshiba Acer Sony