Understanding the logic behing a menu with active elements
<p>I have a css rule like this:</p>

<pre><code>.foo:active {
    background-position: 0px -382px;
}
</code></pre>

<p>.foo is applied to an anchor.</p>

<p>I have a set of several buttons displayed side by side.</p>

<p>I need to have a very common behaviour here:</p>

<p>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.</p>

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

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

<p>What is the logic behind this ?</p>

<p><strong>Update:</strong>
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</p>

<p><strong>Note:</strong> should I provide more details, please, let me know. </p>

<hr>

<p><strong>CODE SAMPLE:</strong></p>

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

<p><strong>Css:</strong></p>

<p>I have nothing defined for .botoesEquipas.</p>

<pre><code>.ativoFinalista {
    background-position: 0px -130px;
}
</code></pre>

<p><strong>The anchor:</strong></p>

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