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 similar to this one in the CSS forum.

Mike