[RESOLVED] Change background color of link onclick

[Uncle Bob]

OK, this should be simple but I can't work out how to do it. I have a frames site where the left hand pane has a menu page with links. When I click on one of my links I want to change the background color of the link (or even just the text color) to highlight the fact that it has just been clicked and remind the user which page they are viewing in the right hand frame (in case they forget....users!!!!).

I've worked out how to change the document bgColor but can't get it to work for a single control.

[wey97]

OK, this should be simple but I can't work out how to do it. I have a frames site where the left hand pane has a menu page with links. When I click on one of my links I want to change the background color of the link (or even just the text color) to highlight the fact that it has just been clicked and remind the user which page they are viewing in the right hand frame (in case they forget....users!!!!).

I've worked out how to change the document bgColor but can't get it to work for a single control.

This turns hyperlink text red after the click. Your href may be different.

<a id="link" href="javascript:void(0);" onclick="this.style.color='#ff0000'">Link</a> 

[penagate]

This turns hyperlink text red after the click. Your href may be different.

<a id="link" href="javascript:void(0);" onclick="this.style.color='#ff0000'">Link</a> 

Never use on* attributes. Always keep scripting and document structure separate.

It sounds to me like the OP simply wants the :active and/or :visited pseudo-classes:

a { color: blue; }
a:visited { color: red; }
a:active { color: green; }

[Uncle Bob]

Actually Wey97 was right the first time, the problem with using a different visited link color is that it will stay that color after a refresh which I don't want.

Thanks guys, simple but I couldn't find the right keywords to use myself.

[wey97]

Never use on* attributes. Always keep scripting and document structure separate.

That was just a quick hint for the OP to do what he wanted to do. It would be up to him to separate his code and doc structure.

Anyway, it would be better to put the script into a .js file so if you ever decide you want to change the color of what the clicked links look like, you don't have to recode every click event.

Remember if you want to keep track of the last link clicked, you need to reset the color of the other links back to default on the click of a new link. Otherwise, after the second link that's clicked, the user can't keep track of the last link clicked, which defeats the purpose.

[CornedBee]

Actually Wey97 was right the first time, the problem with using a different visited link color is that it will stay that color after a refresh which I don't want.

Why not?

[Uncle Bob]

Quote:
Originally Posted by Uncle Bob
Actually Wey97 was right the first time, the problem with using a different visited link color is that it will stay that color after a refresh which I don't want.


Why not?

There are a number of links in my left hand pane and I only want the last one clicked to be highlighted, whereas using the visited link colour option will leave every link clicked a different colour instead of just the last.

It's clear in my head anyway!

[penagate]

This is why you shouldn't use frames, it only leads to headaches.

If you have the page all in one proper document then you can easily give the current page link a CSS ID or class name to identify it.

[Uncle Bob]

Agreed, Frames is useless. This wasn't my project originally so I'm having to work with somebody elses design. It's my first web project as well so I'm not in the mood to rewrite the whole thing either. Works well most of the time.