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

Sample Demonstration for Tab Container in JavaScript


JavaScript JavaScript 
Ratings:
0 Comment(s)
 4746  View(s)
Rate this:

Sample Demonstration for Tab Container in JavaScript

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).


Don't want to miss updates? Please click the below button!

Follow MindStick