Question

I have a css rule like this:

.foo:active {
    background-position: 0px -382px;
}

.foo is applied to an anchor.

I have a set of several buttons displayed side by side.

I need to have a very common behaviour here:

When the user clicks on button 1, it stays active.
If the user clicks on button 2, that should be active and the orders shouldn’t.
If we click on button 3 the same thing… and so on…
So, we should only allow one active button.

Can we deal with this using javascript or should we rely on a server side language?

Perhaps javascript will do the job, since, here, we are not refreshing the page each time the user clicks on one of those buttons.

What is the logic behind this ?

Update:
I should add something to onclick event, I should allow to onclick, apply a class that places the background in a way that the element looks active. But, I’m not sure, how to deal with the part that ONLY ONE of those 9 should be active. :s

Note: should I provide more details, please, let me know.

---

CODE SAMPLE:

function showDetails(eid){
  $.post(baseUrl+"/index/show.details",{id:eid},function(e){

  ...

  //remove ativoFinalista class from all elements with .botoesEquipas class.
  $('.botoesEquipas').removeClass('ativoFinalista'); 

  //add the class to the clicked element
  $(this).addClass('ativoFinalista'); 

 }, 'json');
}

Css:

I have nothing defined for .botoesEquipas.

.ativoFinalista {
    background-position: 0px -130px;
}

The anchor:

<a class="botoesEquipas botaoFinalista<?php echo $e["cod_team"];?>"
 href="javascript:;" onclick="showDetails(<?php echo $e["cod_team"];?>)"><?php echo$e["name"];?></a>

Answer 1

You can use jQuery, but note that a class fooactive is needed:

$('.foo').click(function() {
    $('.foo').removeClass('fooactive'); // Remove active class from all elements of class foo
    $(this).addClass('fooactive');      // Add active class to this specific one
});

Then code CSS like:

.foo { /* default foo style */ }
.fooactive { /* extra styles when active */ }

Edit: You bind click functions the old way. In that case, pass the element like:

onclick="showDetails(123,this)"

and

function showDetails(eid, element){
  $('.foo').removeClass('fooactive'); 
  $(element).addClass('fooactive'); 
}

http://jsfiddle.net/eEJma/