By default, the a.link:active state is shown only for as long as the button on the mouse is pressed. When you let go, it reverts back to the regular a.link state.
How do I make the active state STICK? In other words, in a navigation menu that is permanently on the screen, I want the active state to stick permanently (until another button is pushed).
How is this accomplished?
It's very simple and has nothing to do with a:active.
This only works if I'm using multiple web pages (because it relies on individual changes to the body tag). I'm actually using the navigation menu to hide/unhide various divs, no other webpage gets loaded.
'fraid not, it's all still at the local stage. I can tell you however that I am using <a> as a block object with defined height/width, and background-position switch between regular and active states.
Consider this code -
<p><a id="num1" href="#" onclick="this.className='foo';document.getElementById('num2').classNa me='';">Foo</a></p>
<p><a id="num2" href="#" onclick="this.className='foo';document.getElementById('num1').classNa me='';">Foo</a></p>
Hmm, this code only seems to work on IE. On Firefox, it goes red on click but doesn't stay red.
Also, there should only be one lit up at a time. That's why I liked the idea of making the ACTIVE pseudo-class sticky. There can only be one at a time.
Any alternatives to propose?
Europe, Middle East and Africa