Tab Nav

Jacob Lukas Jul 21, 2004

This script is a simple implementation of tabs. It allows the user to click on a tab and change the content without having to fetch any more data from the server.

The JavaScript Source: Navigation: Tab Nav

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- TWO STEPS TO INSTALL TAB NAV:

1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<HEAD>

<script language="JavaScript">

var tabs = [
				//first tab
				[
					//tab image when unselected
					'news.png',
					//tab image when selected
					'news_selected.png',
					//tab data
					'<p>This is the "News" tab</p>'],
				//second tab
				[
					'games.png',
					'games_selected.png',
					'<p>This would be the "Games" tab</p>'],
				//third tab
				[
					'entertainment.png',
					'entertainment_selected.png',
					'<p>This is the "Entertainment" tab</p>']];
				//you can have more tabs if you want

//if you have empty space between your tabs, adjust this to a lower number
var width = 10;

function preloadImages() {
	for (var y = 0; y < 2; y++) {
		for (var x = 0; x < tabs.length; x++) {
			image = new Image();
			image.src = tabs[x][y];
		}
	}
}

function drawTabs() {
	document.write("<table cellspacing=0 cellpadding=0 border=0><tr>");
	for (var x = 0; x < tabs.length; x++) {
		document.write("<td width="+width+"><a href='javascript:switchTab("+x+")'><img name='tab"+x+"' border=0 src="+tabs[x][0]+"></a></td>");
	}
	document.write("</td><td></td></tr><tr><td id=currentTab colspan="+(tabs.length+1)+">");
	document.write(tabs[0][2]);
	document.write("</td></tr></table>");
	document.images["tab0"].src = tabs[0][1];
}

function switchTab(tab) {
	for (var x = 0; x < tabs.length; x++) {
		if (x != tab)
			document.images["tab"+x].src = tabs[x][0];
	}
	document.images["tab"+tab].src = tabs[tab][1];
	document.getElementById("currentTab").innerHTML = tabs[tab][2];
}

preloadImages();
</script>
</HEAD>

<BODY>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Tab Nav

Leave a Response

Attention JavaScript Coders

Go Deeper