Question

我目前使用CSS Sprites编写以下脚本，可在活动状态和非活动状态之间切换。这很好用，但我希望只有“当前”的子弹才能保持活跃状态。因此，当点击它时，它会将其他人重置为非活动状态。提前感谢您的帮助。

HTML

<script type="text/javascript">
  $(document).ready(function(){
    $('.bullet').click(function() {
      $(this).toggleClass('bullet').toggleClass('active');
    });   
  });
</script>

<a class="bullet" href="#"></a>

CSS

a.bullet {
  display:block;
  margin: 0 0 0 5px;
  float: right;
  width:10px;
  height:10px;
  text-indent:-9999px;
  background:url(../images/bullets.jpg) 0 0 no-repeat;
}

a.bullet:hover {
  display:block;
  margin: 0 0 0 5px;
  float: right;
  width:10px;
  height:10px;
  text-indent:-9999px;
  background:url(../images/bullets.jpg) 0 -10px no-repeat;
}

a.bullet:active, a.active { 
  display:block;
  margin: 0 0 0 5px;
  float: right;
  width:10px;
  height:10px;
  text-indent:-9999px;
  background:url(../images/bullets.jpg) 0 -20px no-repeat;
}

Answer 1

这是实现目标的快捷方式......

$(".bullet").live("click", function() {
    $(".bullet").removeClass("active");
    $(this).addClass("active");
});

onclick，更改类并重置其他人

1 个答案: