Javascript Tabs

The following Code is used to develop a Simple Tabbed Navigation Using Javascript:


       var tabs = ["tab1", "tab2", "tab3"];

       function showtab(e) {

            for (var i = 0; i < 3; i++) {

                    hide(tabs[i]);

            }

            for (var i = 0; i < 3; i++) {

                if (e == i) {

                    toggle(tabs[e]);

                }

            }

        }

       function toggle(e) {

            var x = document.getElementById(e);

            if (x.style.display == "none") {

                x.style.display = "block";

            }

            else {

                x.style.display = "none";

            }

       }

       function hide(e) {

            var x = document.getElementById(e);

            x.style.display = "none";

       }

The HTML Code is as shown below:

    <div>

    <a href ="#" onclick ="showtab(0)">Tab1a>

    <a href ="#" onclick ="showtab(1)">Tab2a>

    <a href ="#" onclick ="showtab(2)">Tab3a>

    div>

    <table>

    <tr>

    <td><div id ="tab1" style ="display:block">hello World this is div1.div>td>

    <td><div id ="tab2" style ="display:none">hello World this is div2.div>td>

    <td><div id ="tab3" style ="display:none">hello World this is div3.div>td>

    tr>

    table>