add Class & remove class on click, remove class from other in list too
HTML
<aside>
<div>
<div>
<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>
</div>
</div>
</aside>
CSS
a {
transition:all 200ms;
color:#333;
background:#eaeaea;
}
.current {
color:#900;
background:#bbb;
}
JavaScript
$('ul li a').click( function(){
if ( $(this).hasClass('current') ) {
$(this).removeClass('current');
} else {
$('li a.current').removeClass('current');
$(this).addClass('current');
}
});