Thursday, May 10, 2012

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>

2 comments: