CODEWITHSUNDEEP
javascripthtmlcss
dave
dave

Reputation: 203

onclick, change class and reset the others

I currently have the following script using CSS Sprites that toggles between active and inactive states. This works great however I would like only the 'current' bullet to remain active. So when its clicked it resets the others to the inactive appearance. Thanks in advance for any help.

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

Upvotes: 0

Views: 2474

Answers (1)

Neil Kinnish
Neil Kinnish

Reputation: 401

Here's a quick way to achieve what you want...

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

Upvotes: 4

Related Questions