Email This Post
Print This Post
Easy to use Tab Navigation
Tue, Feb 10, 2009 – 11:26 amTab Navigation can give a very professional look to your web page.
The problem with most of the Tab Navigation solutions available is how messy it tends to make your HTML code. This has lead many people to not even attempt to use them. Scared off by the amount of JavaScript and CSS code required to make them work.
It was this which lead me to come up with a solution that would be easy to implement and require little to no JavaScript knowledge to use.
I’ve created a CSS file and a JavaScript file for you to use. All you need do is to include these files in your page by placing the following two lines in between your HEAD tags
<script src="tab.js"></script> <link href="tab.css" rel="stylesheet" type="text/css">
Now, where ever you wish the tab navigation page to display in your page use the HTML UL/LI element like below.
<ul class="TabContainer"> <li>Tab 0</li> <li>Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> </ul>
As long as the UL tag has the class of “TabContainer” assigned to it, each LI element will become a tab.
For the content you wish to display when the tab is clicked, create a div to hold the content and assign it the class name of “TabContent”
<div class="TabContent"> <p>I am the content for Tab 0</p> </div> <div class="TabContent"> <p>I am the content for Tab 1</p> </div> . . . <div class="TabContent"> <p>I am the content for Tab 3</p> </div>
That’s it. You are done (as long you have at least the same number of “TabContent“ divs as you have tabs) . Clicking on Tab 0 will display what is inside the first div, clicking on Tab 1 will display what is inside the second div, etc..
If you wish to use a different color for your tabs simply edit the class “TabColor” in the tab.css file to change it to the color you want.
Tab Sub Menu
If you have the need for a top level navigation menu to appear within each tab then inside each of the content divs place your list of hyper links inside a div with a class of “TabTopNavContent”
<div class="TabContent"> <div class="TabTopNavContent"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> <p>I am the content for Tab 0</p> </div>
Source Code
tab.js
function showTab (tabNum) {
// Build Tab and Content ID's based on the tab number
var tabID = 'Tab' + tabNum;
var contentID = 'Content' + tabNum;
// Get the LI object based on the tabID
objLI = document.getElementById(tabID);
// If the object exists
if (objLI) {
// Get the LI Objects parent (which should be the UL element the LI tag is in)
objUL = objLI.parentNode;
// Get all LI's in the UL and set their class and color
var LIs = objUL.getElementsByTagName("li");
for (var i = 0; i < LIs.length; i++) {
var classString = 'Tab TabColor';
LIs[i].className = classString;
}
// Show wanted tab is seleted
objLI.className += ' Selected';
// *****
// ***** Step 2 - Show Tab Content
// *****
// Scan for all DIV objects on page that contain the classname TabContent and hide them
var divObj = document.getElementsByTagName('div');
for (var i = 0; i < divObj.length; i++) {
if (divObj[i].className.indexOf("TabContent") >= 0) divObj[i].style.display='none';
}
// Show wanted content DIV
contentObj = document.getElementById(contentID);
if ( typeof contentObj != "undefined" && contentObj != null ) contentObj.style.display='';
}
}
function BuildTabs() {
// Scan for all UL objects on page that contain the classname TabContainer
var ulObj = document.getElementsByTagName('ul');
for (var i = 0; i < ulObj.length; i++) {
if (ulObj[i].className.indexOf("TabContainer") >= 0) {
// Get all LI's in the UL and set their class name to "Tab"
var LIs = ulObj[i].getElementsByTagName("li");
for (var j = 0; j < LIs.length; j++) {
// Assign Tab Class and Color
var classString = 'Tab TabColor';
if (j==0) classString += ' Selected';
LIs[j].id = "Tab" + j;
LIs[j].className = classString;
LIs[j].innerHTML = "<a href=\"#" + j + "\" onClick=\"showTab('" + j + "');\">" +
LIs[j].innerHTML +
"</a>";
}
}
}
// Scan for all DIV objects on page that contain the classname TabContent
var divObj = document.getElementsByTagName('div');
var cnt = 0;
for (var i = 0; i < divObj.length; i++) {
if (divObj[i].className.indexOf("TabContent") >= 0) {
// Hide it
divObj[i].style.display='none';
divObj[i].id = "Content" + cnt;
// Create colored line and insert it as first item in content div
lineDiv = document.createElement("div");
lineDiv.className = "TabTopLine TabColor";
divObj[i].insertBefore(lineDiv, divObj[i].firstChild);
// See if TabContent Div contains a top level navigation div
var topNavFound = false;
var tabNavObj = divObj[i].getElementsByTagName('div');
for (var j = 0; j < tabNavObj.length; j++) {
// If top leven navigation div found then change background color to match tab
if (tabNavObj[j].className.indexOf("TabTopNavContent") >= 0) {
tabNavObj[j].className += " TabColor";
topNavFound = true;
}
}
// Display first one
cnt+= 1;
if (cnt == 1) divObj[i].style.display='';
}
}
// If URL has a hash value then assume it contains the ID of the tab you wish to display
// so call the showTab function
locationHash = window.location.hash;
if (locationHash.length > 0) showTab(locationHash.substring(1));
}
window.onload = BuildTabs;
tab.css
.PageContainer {
width:640px;
}
.TabContainer {
border-bottom:1px solid #9f9f9f;
clear:both;
display:block;
height:24px;
list-style-type: none;
margin:0;
padding:0 0 0 10px;
}
.Tab {
border-left:1px solid #9f9f9f;
border-top:1px solid #9f9f9f;
border-right:1px solid #9f9f9f;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
height: 15px;
margin-right:2px;
opacity: .6;
filter: alpha(opacity=60);
padding:4px 10px;
}
.Tab:hover {
opacity: 1;
filter: alpha(opacity=100);
}
.Tab a {
color:#5F5F5F;
text-decoration:none;
}
.TabContent {
background:#FFFFFF;
border-left:1px solid #9f9f9f;
border-right:1px solid #9f9f9f;
border-bottom:1px solid #9f9f9f;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
.TabContent p {
margin:0px;
padding:8px;
}
.TabTopLine {
display:block;
height:3px;
line-height:3px;
}
.TabTopNavContent {
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
height:20px;
}
.TabTopNavContent a {
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
margin-left:8px;
}
.Selected {
border-left:1px solid #9f9f9f;
border-top:1px solid #9f9f9f;
border-right:1px solid #9f9f9f;
filter: alpha(opacity=100);
opacity: 1;
padding:5px 10px 4px 10px;
}
.Selected a {
border:0;
color:#000000;
font-weight:bold;
text-decoration:none;
}
/* This is the background colors for the tabs */
.TabColor {background:#FEDA00;}
