add class on click and remove from others

index.html

<ul>
<li><a id="about-link" class="" href="#">ABOUT</a></li>
<li><a id="events-link" href="#">EVENTS</a></li>
<li><a id="reviews-link" href="#">REVIEWS</a></li>
<li><a id="contact-link" href="#">CONTACT</a></li>
</ul>

script.js

$('ul li a').click( function(){
    if ( $(this).hasClass('current') ) {
        $(this).removeClass('current');
    } else {
        $('li a.current').removeClass('current');
        $(this).addClass('current');    
    }
});

style.css

a {
    transition:all 200ms;
    color:#333;
    background:#eaeaea;
}
.current {
    color:#900;
    background:#bbb;
}