set link style on click?

I have a simple navigation to swap layer visibility with Javascript.

[CODE]<ul id=”pagenav”>
<li id=”one”><a href=”javascript://” onclick=”swapLayers(‘lyr1’); return false”>1</a></li>
<li id=”two”><a href=”javascript://” onclick=”swapLayers(‘lyr2’); return false”>2</a></li>
<li id=”three”><a href=”javascript://” onclick=”swapLayers(‘lyr3’); return false”>3</a></li>
</ul>[/CODE]

The background image of the links changes on hover. Now I’ve tried to make the background shift ‘stick’ after a link has been clicked by using [B]a:active[/B], but this doesn’t work. What should I do instead?

CSS:

[CODE]
div#pagenav1 li#one a { background-position: 0 -30px; left: 0; width: 21px }
div#pagenav1 li#one a:hover { background-position: 0 0; width: 21px }
div#pagenav1 li#one a:active { background-position: 0 0; width: 21px }
div#pagenav1 li#two a { background-position: -21px -30px; left: 21px; width: 21px }
div#pagenav1 li#two a:hover { background-position: -21px 0; width: 21px }
div#pagenav1 li#two a:active { background-position: -21px 0; width: 21px }
div#pagenav1 li#three a { background-position: -42px -30px; left: 42px; width: 21px }
div#pagenav1 li#three a:hover { background-position: -42px 0; width: 21px }
div#pagenav1 li#three a:active { background-position: -42px 0; width: 21px }[/CODE]

It would be great if someone could point me into the right direction. Is this not possible with CSS? Many thanks.

Also in #CSS _↴