Capt. Horatio T.P. Webb
 
Dashboard Template Using Tab Navigation

Parks -- Spring 2014
Last Updated 12PM 2/10/2014

This page's dashboard panels are organized into five separate DIV blocks. These DIV's are controlled by the 4 "tabs" (i.e,. clickable links) above. By clicking any on of the "five" tabs, a new page (actually a DIV block) appears to take up the entirety of the bottom portion of the page.

The HTML is composed of four DIV blocks with id values as shown in globals above:

Thus, the above code proves: tab titles, DIV ids, and navigation between 4 DIV blocks that appear to be separate pages. This code can be used as a template for any self-contained page-like navigation.

THE HTML

The only HTML body elements are the DIV blocks that hold the content for each tabbed page.

The only requirement for these DIVs is the value of the id. They should be:

The content of each DIV corresponds to a tab at the top. How the text of the corresponding tabs is defined is discussed under the "The Javascript" tab above.

The tabs for each DIV will be presented in the order: 0,1,2,3,4,.5.

So, you MUST order the content of the DIVs in the same order as the tabs at the top. (i.e.,

The contents of the body tag will appear as:

<body>
<div id="d0" class="tabbed""> content for 1st DIV goes here </div>
<div id="d1" class="tabbed""> content for 2nd DIV goes here </div>
<div id="d2" class="tabbed""> content for 3rd DIV goes here </div>
<div id="d3" class="tabbed""> content for 4th DIV goes here </div>
<div id="d4" class="tabbed""> content for 5th DIV goes here </div>
.
.
.
</body>

THE JAVASCRIPT

  1. global data

    The following global array is defined at the top of the script:

    var tab_titles=new Array("Dashboard Tabs","The HTML","The Javascript","The CSS","The Whole Thing");

  2. go(0)

    this is the initializing function that is executed when page load occurs -- called in the body tag:

    <body onload="go()">

    The function go(0) is:

    function go(0)
    {
      tabs_string="<ul class='tablist'>";
      for (i=0;i<tab_titles.length;i++)
          {
           tabs_string=tabs_string+"<li><span id='tab"+ i.toString() +"' class='tab'> ";
           tabs_string=tabs_string+"<A class='anchortab' href='#' onClick='show_tab("+i.toString()+")'>";
           tabs_string=tabs_string + tab_titles[i] + "</a> </span></li>";      
          }  
      tab_links.innerHTML=tabs_string+"</ul>"; 
      show_tab(n);
    }
    

    The code above creates a list (<ul class='tablist'>). This list has two operant CSS values:

    list-style: none;
    float:left;

    that make the list horizontal (i.e., list-style:none) that is floated to the left. Each tab (<li>) has a span block (with id="tab" + "0", "1", "2", "3"...) that contains a link:

    <A class='anchortab' href='#' onClick='show_tab("+i.toString()+")'>"+tab_titles[i]+"</a>"

    with the tab_title and an onclick that executes the DIV swap. This list is placed in the DIV where id="tab_links". This DIV is special in that it has ONLY a bottom black border.

  3. show_tab(n)

    Initially and with each tab click, the show_tab(n) function is executed. The value of n is the number of the tab that has been clicked.

    This function changes which of the 4 DIV block is visible.

    function show_tab(n)
    {
        // *** hide all divs; darken the background and place the bottom border on the tab
    
        for (i=0;i<tab_titles.length;i++)
           {
            document.getElementById("d"+i.toString()).style.display="none";
            document.getElementById("tab"+i.toString()).style.borderBottom="solid black 2px";
            document.getElementById("tab"+i.toString()).style.backgroundColor="#aaaaff";
           }
    
        // *** make the chosen DIV visible; match the background to the div
        //     and remove the bottom border on the tab
    
        document.getElementById("d"+n.toString()).style.display="block";
        document.getElementById("tab"+n.toString()).style.borderBottom="solid white 2px";
        document.getElementById("tab"+n.toString()).style.backgroundColor="#ffffff";
    }
    

    The code above make all of the DIV blocks on the page have style display="none" which makes all the DIV invisible AND they do not take up any space on the page. Further, inside a loop, ...
       the code sets all bottom borders of the SPAN blocks containing the tab titles to black and their background to light blue ...

    Then it makes the chosen DIV block visible;
    makes the bottom border of that tab white; and
    sets the background color of the chosen tab white.

    This merges the bordered space of the tab SPAN with the visible DIV block.

    The detail trick is to make the chosen tab have NO bottom border and overlay the apparent top border of the big DIV block. But, the big DIV has NO top border - the DIV containing the tabs has a bottom border and no side or top border.

    The entire script section is shown below:

    //
    // *** specify the titles to appear in the tabs at the top of the page
    //     titles in double quotes, comma separated
    //
    var tab_titles=new Array("Dashboard Tabs","The HTML","The Javascript","The CSS","The Whole Thing" );
    //
    // *** code below fires when page is loaded (<body onload="go(0)...
    //     it creates the tabs and their links at the top of the page
    //     it makes the first DIV block (id="do") visible and hides the rest...
    //
    function go(n)
     {
      tabs_string="<ul class='tablist'>";
      for (i=0;i<tab_titles.length;i++)
          {
           tabs_string=tabs_string+"<li><span id='tab"+i.toString();
           tabs_string=tabs_string+"' class='tab'> <A class='anchortab' href='#';
           tabs_string=tabs_string+" onClick='show_tab("+i.toString()+")'>";
           tabs_string=tabs_string+tab_titles[i]+"</a> </span></li>"      
          }  
      tab_links.innerHTML=tabs_string; 
      show_tab(n);
    }
    //
    // *** the code below executes each time the user clicks a tab at the top
    //
    function show_tab(n)
    {
        // *** hide all divs; darken the background and place the bottom border on the tab
    
        for (i=0;i<tab_titles.length;i++)
           {
            document.getElementById("d"+i.toString()).style.display="none";
            document.getElementById("tab"+i.toString()).style.borderBottom="solid black 2px";
            document.getElementById("tab"+i.toString()).style.backgroundColor="#aaaaff";
           }
    
        // *** make the chosen DIV visible; match the background to the div
        //     and remove the bottom border on the tab
    
        document.getElementById("d"+n.toString()).style.display="block";
        document.getElementById("tab"+n.toString()).style.borderBottom="solid white 2px";
        document.getElementById("tab"+n.toString()).style.backgroundColor="#ffffff";
    }
    

THE CSS

<style type="text/css">
body,td {font-family:Comic Sans MS;
         font-size:14px;
         border:2px;
}
table.capt {width:900px;
border:solid black 2px;
margin:0px;
padding:0px;
}

a.anchortab:link   {color:#0000ff;text-decoration:none;}
a.anchortab:visited{color:#0000ff;text-decoration:none;}
a.anchortab:hover  {color:#0000ff;text-decoration:none;}
a.anchortab:active {color:#0000ff;text-decoration:none;}

span.tab {            /* this span tag contains the text for the tabs */
float:left;
height:22px;
background-color: #aaaaff;
border-top:solid black 2px;
border-right:solid black 2px;
border-left:solid black 2px;
border-bottom: none;
border-top-left-radius:7px;
border-top-right-radius:7px;
margin-right:10px;  /* these two margins provide space between the tabs */
margin-left:10px;
z-index:20;
}
ul.tablist{           /* this ul tag contains the the tabs */
list-style: none;
float:left;
margin:0px;
padding:0px;
width:900px;
z-index:20;
}
div.tlinks {          /* this div contains the the tabs */
font-family:Comic Sans MS;
font-size:16px;
width:900px;
height:24px;
padding-bottom:0px;
padding-top:6px;
padding-left:6px;
padding-right:6px;
margin:0px;
background-color:white;
border-bottom:solid black 2px;
border-left:none;
border-right:solid white 5px;
z-index:2;
}
div.tabbed {          /* this div tag holds the contents of each tab's page */
font-family:Comic Sans MS;
font-size:14px;
border-top:none;
border-right:solid black 2px;
border-left:solid black 2px;
border-bottom:solid black 2px;
width:900px;
padding:6px;
z-index:10;
}
</style>

THE WHOLE THING