SwitchMenu - Active colour change

rubee · #1 (**permalink**) 04-29-10, 08:12 AM

I used a switchmenu from Dynamic Drive and customised it as used for content instead of links.

The problem I'm having is that I want the active (open item) heading to change colour

I tried the onclick(this.style.color) thing. but that changed the colour permanently once clicked. And I would like it to revert back to normal once another menu is click.

Hope I'm making sense.

Much thanks.

job0107 · #2 (**permalink**) 04-29-10, 04:35 PM

You will need to use a couple of global variables to store the current element and the current color of the current element.
Then use a function to restore the elements (previous element) color when you select a new element.
Here is an example using some buttons.
When you click on a button the onclick event listener passes a reference to the button object and the new color to a function (change_color()) which first restores the previous buttons color, then stores the current button object and it's current color and then changes it's color.

HTML Code:

<html>
<head>
<script>
var prev_element,prev_color;
function change_color(element,color)
{
 if(prev_element){prev_element.style.color = prev_color;}
 prev_element = element;
 prev_color = element.style.color;
 element.style.color = color;
 }
</script>
</head>
<body>
<button style="color:#000;" onclick="change_color(this,'#f00')">Button 1</button>
<button style="color:#000;" onclick="change_color(this,'#00f')">Button 2</button>
<button style="color:#000;" onclick="change_color(this,'#aa0')">Button 3</button>
<button style="color:#000;" onclick="change_color(this,'#0f0')">Button 4</button>
</body>
</html>

rubee · #3 (**permalink**) 05-01-10, 09:39 AM

Worked wonders! Thanks much!