Add/remove class

by lovromar

HTML

<ul id="status">
        <li class="pending"><a href="#">Pending</a></li>
        <li id="won" class="won"><a href="#">Won!</a></li>
        <li class="lost"><a href="#">Lost</a></li>
    </ul>

CSS

.active{background:green}
.won-active{background:red}

JavaScript

$(function() {
        var lis = $('#status li');
        lis.click(function() {
            lis.removeClass('active won-active');
            $(this).addClass('active')
        });
    
        lis.filter('.won').click(function() {
            $(this).toggleClass('won-active')
        });
    });