Need help with changing anchor class

[achtungbaby]

Hello, I'm very bad with javascript and would appreciate any assistance...!

I'm using one of the ajax scripts to load some content:


<li id="cast-clooney" class="graphic-text"><a class="inactive" href="javascript:ajaxpage('bios/external.html','subpage-content');" onclick="ajaxpage('bios/external.html','subpage-content');">Jim Bo Bob</a></li>

Everything works great but I also need to have the anchor class change from "inactive" to "active" once a user clicks on it.

Any help or suggestions would greatly be appreciated.

[Twey]

That's not necessary. You can style active anchors with the a:active pseudo-class.

[achtungbaby]

That's not necessary. You can style active anchors with the a:active pseudo-class.
Right, but a:active will only remain active provided that the user doesn't click anywhere else on the page. I need the link to act as a sort of breadcrumb to indicate where the user is at...

[jscheuer1]

You want a:visited then.

[achtungbaby]

You want a:visited then.
But the only problem with that is, if a user selects another link of the same menu, the result will be two menu links in a "selected" state.

Is this something that'd be difficult...?

[mwinter]

<li id="cast-clooney" class="graphic-text"><a class="inactive" href="javascript:ajaxpage('bios/external.html','subpage-content');" onclick="ajaxpage('bios/external.html','subpage-content');">Jim Bo Bob</a></li>Using the javascript pseudo-scheme in links is rarely a good idea (unless preventing all user agents that don't implement JavaScript [or similar] from navigating the site is the intent).


Everything works great but I also need to have the anchor class change from "inactive" to "active" once a user clicks on it.

function changeState(link) {
this.className = ('active' == this.className)
? 'inactive'
: 'active';
}

<a ... onclick="...; changeState(this);">...</a>



Right, but a:active will only remain active provided that the user doesn't click anywhere else on the page.The :active pseudo-class only remains in effect whilst the user is 'activating' a particular element. For instance, a link is active from when the user clicks a link, to when the mouse button is released.


But the only problem with that is, if a user selects another link of the same menu, the result will be two menu links in a "selected" state.You should have stated this aim in the first place:



var changeState = (function() {
var active = null;

return function(link) {
if(active == link) {
link.className = 'inactive';
active = null;
} else if(active) {
active.className = 'inactive';
(active = link).className = 'active';
} else {
var state = 'inactive';

if('inactive' == link.className) {
state = 'active';
active = link;
}
link.className = state;
}
};
})();
Untested.

There is another thread (http://www.dynamicdrive.com/forums/showthread.php?t=6075) similar to this one in the CSS forum.

Mike