Change link id onclick

Trying to write this with event handlers in the link tags

[illtron]

Here's my situation. I'm trying to change the id of one link in a group when you click it in order to change the style. If you click another, that link should then get the id, and the previous one should revert.

The point of this is to change the CSS styling applied to that particular link.

I'm guessing I need to get the links in the id and then do that, but every method I've tried just doesn't seem to work. This is the closest I can find, but I can't seem to get it to work: [webmasterworld.com...]

Here's a close approximation of my code. If you're wondering, the extra spans are needed for some CSS stuff I'm doing.

<div id="selector" class="controls">
<a href="#one"><span>link one</span></a>
<a href="#two"><span>link two</span></a>
<a href="#three"><span>link three</span></a>
<a href="#four"><span>link four</span></a>
</div>

Thanks!

[Gibble]

Why not change the css class rather than the id? It would be much simpler and have the same effect.

[illtron]

I'd be perfectly happy to do that. Can you help?

[Gibble]

Try this.

<style>
.highlightURL {
background: yellow;
}
</style>
<script>
var oldA = null;
function highlightURL(anchor) {
//Reset Old
if (oldA!= null) oldA.className = '';
//Find New
anchor.className = "highlightURL";
//Set to Old
oldA = anchor;
}
</script>
<a href="#foo1" onClick="highlightURL(this)">foo</a>
<a href="#foo2" onClick="highlightURL(this)">foo</a>
<a href="#foo3" onClick="highlightURL(this)">foo</a>

edit: This makes more sense...#*$! was I thinking before.

[edited by: Gibble at 7:50 pm (utc) on Oct. 16, 2007]

[Gibble]

Any luck with this? Did this work for you?