using target in css to keep color - html

Question

I have the following example in http://jsfiddle.net/uA97K/
What I am trying to achieve is to keep the same colour on a selected tab as the hover. So when a user clicks on a tab, that selected tab will remain blue until another tab is selected.
I thought this could be done by using a:target but does look to be working.
#bar a:target { background: #00A3EF; color: #003366;}
Any ideas what I may be doing wrong?

Answer 1

With only CSS, you can't do it. But you can use jQuery, and an .active class for this:
http://jsfiddle.net/uA97K/1/
$('#bar a').click(function(){
$('.active').removeClass('active');
$(this).addClass('active')
});

Answer 2

This is, as already noted, impossible with CSS currently. It is, however, possible with plain JavaScript (albeit the following demonstration works only with browsers that support document.querySelector(), addEventListener() and the element.classList API):
function hashMonitor() {
var D = document,
active = D.querySelector('a.active'),
link = D.querySelector('[href="#' + D.querySelector(':target').id + '"]');
if (active) {
active.classList.remove('active');
}
link.classList.add('active');
}
window.addEventListener('hashchange', hashMonitor, false);
JS Fiddle demo.
Conceivably, under Level 4 of CSS (currently entirely unsupported in the wild) this could become possible, but until implementations appear it seems fruitless to speculate on how such selectors might be used.
References:
CSS Selectors, Level 4.
document.querySelector().
element.classList.
EventTarget.addEventListener().