javascript - navigation tab link problems

[daJunkCollector]

The following code creates some very nice tabs. However, the I click the tab it displays specified text below the button. I want the tab to execute a page change, so I can use the tabs for my page's primary navigation. Is there a simple change I can make so that click the tab causes the current URL to change?

Thanks

<script language="JavaScript">

var tabs = [
				//first tab
				[
					//tab image when unselected
					'images/tab_light.gif',
					//tab image when selected
					'images/tab_dark.gif',
					//tab data
					'this text is displayed'],
				//second tab
				[
					'images/tab_light.gif',
					'images/tab_dark.gif',
					'<p>This would be the "Games" tab</p>'],
				//third tab
				
				[
					'images/tab_light.gif',
					'images/tab_dark.gif',
					'<p>This would be the "Games" tab</p>'],
				//third tab
				
				[
					'images/tab_light.gif',
					'images/tab_dark.gif',
					'<p>This would be the "Games" tab</p>'],
				//third tab
				
				[
					'images/tab_light.gif',
					'images/tab_dark.gif',
					'<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>

[acoder]

To change the current URL, use: [CODE=javascript]location.href=' newurl.html';[/CODE]

[daJunkCollector]

Thank you for the reply! But, when I replace, 'this text is displayed' with your script it loads newurl.html before I even click the tab.

[acoder]

No, you need to put it in the switchTab function.

[daJunkCollector]

acoder,

Alright, thanks much. We are making progress. I added the line, location.href=' newurl.html';, to the very bottom of the switch tab function. Now, when I click the tab I got to a new URL. However, all the tabs take me to that one particular URL. The goal is to have each tab take me to a unique URL.

[acoder]

In your tabs array, put the URL, not location.href=.

Then, in the switchTabs function, change the location: [CODE=javascript]location.href=t abs[tab][2];[/CODE]

[daJunkCollector]

Acoder,

You are the man, and I love you.

[acoder]

Glad you managed to solve your problem even if the last post was a bit much!