By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,449 Members | 934 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,449 IT Pros & Developers. It's quick & easy.

javascript - navigation tab link problems

daJunkCollector
P: 76
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





Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript">
  2.  
  3. var tabs = [
  4.                 //first tab
  5.                 [
  6.                     //tab image when unselected
  7.                     'images/tab_light.gif',
  8.                     //tab image when selected
  9.                     'images/tab_dark.gif',
  10.                     //tab data
  11.                     'this text is displayed'],
  12.                 //second tab
  13.                 [
  14.                     'images/tab_light.gif',
  15.                     'images/tab_dark.gif',
  16.                     '<p>This would be the "Games" tab</p>'],
  17.                 //third tab
  18.  
  19.                 [
  20.                     'images/tab_light.gif',
  21.                     'images/tab_dark.gif',
  22.                     '<p>This would be the "Games" tab</p>'],
  23.                 //third tab
  24.  
  25.                 [
  26.                     'images/tab_light.gif',
  27.                     'images/tab_dark.gif',
  28.                     '<p>This would be the "Games" tab</p>'],
  29.                 //third tab
  30.  
  31.                 [
  32.                     'images/tab_light.gif',
  33.                     'images/tab_dark.gif',
  34.                     '<p>This is the "Entertainment" tab</p>']];
  35.                 //you can have more tabs if you want
  36.  
  37. //if you have empty space between your tabs, adjust this to a lower number
  38. var width = 10;
  39.  
  40. function preloadImages() {
  41.     for (var y = 0; y < 2; y++) {
  42.         for (var x = 0; x < tabs.length; x++) {
  43.             image = new Image();
  44.             image.src = tabs[x][y];
  45.         }
  46.     }
  47. }
  48.  
  49. function drawTabs() {
  50.     document.write("<table cellspacing=0 cellpadding=0 border=0><tr>");
  51.     for (var x = 0; x < tabs.length; x++) {
  52.         document.write("<td width="+width+"><a href='javascript:switchTab("+x+")'><img name='tab"+x+"' border=0 src="+tabs[x][0]+"></a></td>");
  53.     }
  54.     document.write("</td><td></td></tr><tr><td id=currentTab colspan="+(tabs.length+1)+">");
  55.     document.write(tabs[0][2]);
  56.     document.write("</td></tr></table>");
  57.     document.images["tab0"].src = tabs[0][1];
  58. }
  59.  
  60. function switchTab(tab) {
  61.     for (var x = 0; x < tabs.length; x++) {
  62.         if (x != tab)
  63.             document.images["tab"+x].src = tabs[x][0];
  64.     }
  65.     document.images["tab"+tab].src = tabs[tab][1];
  66.     document.getElementById("currentTab").innerHTML = tabs[tab][2];
  67. }
  68.  
  69. preloadImages();
  70. </script>
Jun 28 '07 #1
Share this Question
Share on Google+
7 Replies


acoder
Expert Mod 15k+
P: 16,027
To change the current URL, use:
Expand|Select|Wrap|Line Numbers
  1. location.href='newurl.html';
Jun 29 '07 #2

daJunkCollector
P: 76
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.
Jun 29 '07 #3

acoder
Expert Mod 15k+
P: 16,027
No, you need to put it in the switchTab function.
Jun 30 '07 #4

daJunkCollector
P: 76
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.
Jul 2 '07 #5

acoder
Expert Mod 15k+
P: 16,027
In your tabs array, put the URL, not location.href=.

Then, in the switchTabs function, change the location:
Expand|Select|Wrap|Line Numbers
  1. location.href=tabs[tab][2];
Jul 2 '07 #6

daJunkCollector
P: 76
Acoder,

You are the man, and I love you.
Jul 2 '07 #7

acoder
Expert Mod 15k+
P: 16,027
Glad you managed to solve your problem even if the last post was a bit much!
Jul 2 '07 #8

Post your reply

Sign in to post your reply or Sign up for a free account.