javascript - 了解具有事件元素的菜单背后的逻辑

Question

我有一个像这样的CSS规则:

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

.foo 应用于 anchor 。

我有一组并排显示的按钮。

我需要在这里有一个非常常见的行为:

当用户单击按钮 1 时，它保持事件状态。如果用户单击按钮 2，则该按钮应该处于事件状态，而订单则不应处于事件状态。如果我们点击按钮 3，同样的事情......等等......因此，我们应该只允许一个事件按钮。

我们可以使用 javascript 来处理这个问题还是应该依赖服务器端语言？

也许 javascript 可以完成这项工作，因为在这里，我们不会在用户每次单击其中一个按钮时刷新页面。

这背后的逻辑是什么？

更新:我应该向 onclick 事件添加一些内容，我应该允许 onclick，应用一个以元素看起来活跃的方式放置背景的类。但是，我不确定如何处理这 9 个中只有一个应该处于事件状态的部分。 :s

注意:如果我需要提供更多详细信息，请告诉我。

<小时/>

代码示例:

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:

我没有为 .botoesEquipas 定义任何内容。

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

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

您可以使用 jQuery，但请注意，需要一个类 fooactive:

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

然后编写 CSS 代码，如下所示:

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

编辑:您可以用旧的方式绑定(bind)点击函数。在这种情况下，传递元素如下:

onclick="showDetails(123,this)"

和

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

http://jsfiddle.net/eEJma/