Advertisements

Create tab view in java script

With the combination of div tag, style:display attribute of div tag and java script one can make a simple tab view which look something like as follow:

Following is the js code for that:

function tabChange(i) {
      for ( var j = 1; j <= 3; j++) {
           if (i == j) {
                document.getElementById("Page" + j).style.display = "block";
                document.getElementById("Tab" + j).className = "tabSelect";
           } else {
                document.getElementById("Page" + j).style.display = "none";
                document.getElementById("Tab" + j).className = "tab";
           }
      }
}

The html code:-

<div>
       <a id="Tab1" href="javascript:tabChange(1)">Tab 1</a><a id="Tab2" href="javascript:tabChange(2)">Tab 2</a><a id="Tab3" href="javascript:tabChange(3)">Tab 3</a>
</div>
<div id="Page1" class="box">
     First tab content.
</div>
<div id="Page2" style="display: none;">
     Second tab content.
</div>
<div id="Page3" style="display: none;">
     Third tab content.
</div>

And the css used in this example:

.tab {
    width: 105px;
    padding: 5px;
    color: #065fba;
    background: #f4f5f8;
    border: #e2e2e2 1px solid;
}
.tab:hover {
    background: #065fba;
    color: #f4f5f8;
}
.tabSelect {
    width: 800px;
    padding: 5px;
    background: #065fba;
    color: #f4f5f8;
    border: #e2e2e2 1px solid;
}
.box {
    width: 600px;
    margin-top:5;
    padding: 5px;
    background: #ffffff;
    border: #065fba 2px solid;
    height:600px;
}
a {
    color: #000000;
    text-decoration: none;
}
Advertisements

About harryjoy
A passionate self-taught software developer. Currently working as Lead Software Engineer in an IT company.

2 Responses to Create tab view in java script

  1. Pingback: Some useful JavaScript functions « harryjoy

  2. Chinna says:

    Thanks you so much Harry Helped alot

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: