onclick，更改课程并重置其他课程

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