Active buttons

[riooooo]

Hi all,

I have a small question to ask and hope someone can help!

I have a menu on my site (still in development) and what I would like to do with JS is what when people click a menu item the button color changes its active state. So at the moment the menu I have is in black and the home page button background color is highlighted in red and what I would like is when someone clicks on the "About us" menu option the highlight color of that button changes to red and the home page menu returns to black. So it only shows you what page you are on.

I have seen this done allot but I just cant figure out what to search for...

Please let me know if I am not clear with my question...

I hope someone can help, thanks in advance.

John

[Jas]

If your not using iframes, you could just create the pages with the menu already like that. For example, page one is 1 0 0 0 (where 1 is red and 0 is black), page two is 0 1 0 0, etc.

Otherwise, you need to do a little more work. The JavaScript shouldn't be too tricky if I understand this correctly. Probably something like:

<script type="text/javascript">
var red = "one";
function change(id){
    if(id != red){
        document.getElementById(id).style.backgroundColor = "red";
        document.getElementById(red).style.backgroundColor = "black";
        red = id;
    }
}
</script>
<a href="" id="one" onclick="change(this)">Click Me</a>
<a href="" id="two" onclick="change(this)">Click Me</a>
<a href="" id="three" onclick="change(this)">Click Me</a>

I don't know if that code works, but what you need is something along those lines.

[riooooo]

Thank you so much Jas for the quick reply!!! I could not get it to work however I will play around with the code you made. Just for refferance, what do you call that type of effect?

Thanks again!

[Jas]

I'm not sure what you would call the effect, but I fixed the code and tested it this time (in IE7 and FF2; it seemed to work in both)
This should help you a little more. I also put comments in so you can see what's going on.

<!-- head //-->
<style type="text/css">
a{
background-color: black;
color: white;
}
</style>

<script type="text/javascript">
var red = "one";
//set this to the ID of the button which is already red

//set up a function to change the color
function change(id){

    //did the user click a link that's alreay red?
    if(id != red){

        //Change new link to red
        document.getElementById(id).style.backgroundColor = "red";
        //Change old link to black
        document.getElementById(red).style.backgroundColor = "black";

        //save the current red link
        red = id;

    }//end if
}//end function
</script>

<!-- body //-->
<a href="#" id="one" onclick="change(id)" style="background-color:red">Click Me</a>
<a href="#" id="two" onclick="change(id)">Click Me</a>
<a href="#" id="three" onclick="change(id)">Click Me</a>

Hopefully that will do the trick.

[riooooo]

Thanks again Jas, it works perfectly!! Really appreciate your help.

Good work!

John