CODEWITHSUNDEEP
htmlcsstabs
everreadyeddy
everreadyeddy

Reputation: 748

using target in css to keep color

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?

Upvotes: 0

Views: 225

Answers (2)

David Thomas
David Thomas

Reputation: 253486

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:

Upvotes: 1

Seer
Seer

Reputation: 739

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')
});

Upvotes: 1

Related Questions