blog

Home / DeveloperSection / Blogs / Sample Demonstration for Tab Container in JavaScript

Sample Demonstration for Tab Container in JavaScript

Amit Singh7115 22-Apr-2011

Tab container is used for storing different item in each tab. So tab container is the collection of Tabs. In this example it contains five tabs.

How to create TabContainer in JavaScript

Step1:  write this code and save it as html form


<body>
        <form id="form1">
        <table>
            <tr align="left">
                <td>
                    <input type="button" class="button1" id="btnTab1" value="Tab1" onclick="show(this);" />
                </td>
                <td>
                    <input type="button" class="button1" id="btnTab2" value="Tab2" onclick="show(this);" />
                </td>
                <td>
                    <input type="button" class="button1" id="btnTab3" value="Tab3" onclick="show(this)" />
                </td>
                <td>
                    <input type="button" class="button1" id="btnTab4" value="Tab4" onclick="show(this)" />
                </td>
                <td>
                    <input type="button" class="button1" id="btnTab5" value="Tab5" onclick="show(this)" />
                </td>
            </tr>
        </table>
        <table style="font-size: 16px;" width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <div id="div1" class="divFirst">
                    </div>
                    <div id="div2" class="divHide">
                    </div>
                    <div id="div3" class="divHide">
                    </div>
                    <div id="div4" class="divHide">
                    </div>
                    <div id="div5" class="divHide">
                    </div>
                </td>
            </tr>
        </table>
        </form>
    </body>


Step2: Create javascript file and add this link in head section in html


page.and write this code

 var a = new Array("div1", "div2", "div3", "div4", "div5");
        var b = new Array("btnTab1", "btnTab2", "btnTab3", "btnTab4", "btnTab5");
        function show(e) {
            var i = 0;
            var j = 1;
            for (var t = 0; t < b.length; t++) {
                if (b[t] == e.id) {
                    i = t;
                    if (i > 0) {
                        j = 0;
                    }
                    else {
                        j = i + 1;
                    }
                    break;
                }
            }
            e.setAttribute("class", "btnActive");
            for (var k = 0; k < b.length; k++) {
                if (k == i && (document.getElementById(a[k]) != null)) {
                    document.getElementById(a[k]).style.display = "block";
                    if (i == j)
                        j = i + 1;
                }
                else {
                    if (document.getElementById(a[k]) != null) {
                        document.getElementById(a[j]).style.display = "none";
                        document.getElementById(b[j]).setAttribute("class", "btnInactive");
                        j = j + 1;
                    }
                }
            }
        }
        window.onload = function () {
            document.getElementById(b[0]).setAttribute("class", "btnActive");
        }

Step3: Create a css file and add in head section of html page

.button1
        {
            border: solid 1px silver;
            color: #11518F;
            height: 30px;
        }
        .btnActive
        {
            border: solid 1px silver;
            color: #11518F;
            height: 33px;
            z-index: 2;
            background-color: White;
            border-bottom-color: White;
        }
        .btnInactive
        {
            border: solid 1px silver;
            color: #11518F;
            height: 30px;
            z-index: 0;
            border-bottom-color: Silver;
        }
        .divHide
        {
            z-index: 0;
            display: none;
            border: 1px solid silver;
            margin-top: -5px;
        }
        .divFirst
        {
            z-index: 1;
            display: block;
            border: 1px solid silver;
            margin-top: -5px;
        }

Note: We simply extend the tab by adding input button similar to add button and one div section (area of particular tab section).


Updated 18-Sep-2014

Leave Comment

Comments

Liked By