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

       <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 id="Page1" class="box">
     First tab content.
<div id="Page2" style="display: none;">
     Second tab content.
<div id="Page3" style="display: none;">
     Third tab content.

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;
    padding: 5px;
    background: #ffffff;
    border: #065fba 2px solid;
a {
    color: #000000;
    text-decoration: none;

2 thoughts on “Create tab view in java script

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.