tabbed menu changing the tab when link is active

benf posted this at 17:58 — 16th February 2008.

Joined: Feb 2005

Well im building a website and have designed a nice tabbed menu. When a tab is clicked i want the class name of that link to change so that the tab changes to a different style so that the user can see which page they are on.

Trouble is i dont seem to be able to do it.

Ive been messing around with some javascript. When the user clicks the button it sends the id of that button to a function, it then tells all the links in that class group to show a certain style except the link that matches the id that has just been sent.

I just cant do it. Here is my attempt.

<html>
<head>
&lt;script type="text/javascript"&gt;
var temp="";
function active(id){
	  	if(temp !=""){
	   		document.getElementById(temp).style.backgroundColor='white';
	   		document.getElementById(id).style.backgroundColor='red';
	   		temp = id;
		}else{
			document.getElementById('1').style.backgroundColor='red';
	}	
}
&lt;/script&gt;
</head>
<body>
<a id="1" class="off" href="tabtest.html" onclick="javascript: active(1)">Link 1</a>
<a id="2" class="off" href="tabtest.html" onclick="javascript: active(2)">Link 2</a>
<a id="3" class="off" href="tabtest.html" onclick="javascript: active(3)">Link 3</a>
<a id="4" class="off" href="tabtest.html" onclick="javascript: active(4)">Link 4</a>
<a id="5" class="off" href="tabtest.html" onclick="javascript: active(5)">Link 5</a>
</body>
</html>

Good Value Professional VPS Hosting

greg posted this at 19:16 — 16th February 2008.

He has: 1,581 posts

Joined: Nov 2005

I couldn't help you with Javascript, but one of my sites I did similiar with PHP.
I couldn't find anything on the internet about it so used my own method, which may be crude and there may be a better way, but here's how I did it:

$pageget = $_SERVER['PHP_SELF'];

<div id="navmenu">
<ul>
<li> <?php if ($pageget == "/index.php") 
{echo 'class="current"'; echo '<a href="#"><b>Home</b></a>';} 
else {echo '<a href="index.php"><b>Home</b></a>';} ?> </li>

so basically the div id "navmenu" is the CSS with the styling for my menu, but if PHP determines that the page they are on is the link in the menu they clicked then PHP changes the class to "current"
Then obviously in my CSS I have a styling for the "current" menu buttons
I also made the link to "#" if it is current, so users can't click the current link on the menu and reload the page they are already on, that is just personal preference though.

That code is on all my nav menu links so whatever page is the current one, PHP will determine it is the current one and change the style accordingy.

benf posted this at 19:46 — 16th February 2008.

They have: 426 posts

Joined: Feb 2005

Hi thanks for the reply. I have a problem with this method...

All my pages have this URL convention - index.php?action=x

I tried using php to determin the page by using $_SERVER['PHP_SELF'] but that takes the actual path rather than the URL.

Any ideas?

Good Value Professional VPS Hosting

greg posted this at 22:22 — 16th February 2008.

He has: 1,581 posts

Joined: Nov 2005

You could try the results of these:

<?php
 $variable = $_SERVER['SCRIPT_FILENAME']; 
?>

That will give you something like:
/home/YOURWEBSITE/public_html/index.php

and try this

<?php
 $variable = $_SERVER['SCRIPT_NAME']; 
?>

That will give you something like this
/index.php

You will have to test them yourself, sorry. I don't use url/GET/link info at all.
just echo them to see what you get.
They should work though.

Copy this code into a new file called test.php and run test.php on your site-

<?php
$script_filename = $_SERVER['SCRIPT_FILENAME'];
$script_name = $_SERVER['SCRIPT_NAME'];

echo "Script_filename:<br>".$script_filename."<br><br><br>Script_name:<br>".$script_name;
?>

The $_SERVER['SCRIPT_NAME'] is the better one if it works, as using it in your nav menu you will only have to check if $something equals "/index.php" or equals "/aboutus.php" etc

benf posted this at 00:37 — 17th February 2008.

They have: 426 posts

Joined: Feb 2005

Oh thanks, not seen script_name and script_filename? Why do you not use any GET at all?

webwiz posted this at 01:28 — 17th February 2008.

He has: 629 posts

Joined: May 2007

It's not at all clear to me what you are trying to do, as all the tabs in your example go to the same page. I have a feeling you can do this in CSS, but without more info I can't tell. Do you have a sample page you can show us?

You may like to review your IDs. See this from the W3C recommendation:

Quote: ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;