Add Active class

by narensrinivasans

HTML

<ul class="nav">
    <li><a class="active">LinkOne</a></li>
    <li><a>LinkTwo</a></li>
    <li><a>LinkThree</a></li>
</ul>

CSS

li { float:left; list-style:none; margin-right:10px; }

a {
    background: whitesmoke;
    border: 1px solid gray;
    cursor: pointer;
    color: grey;
    display: inline-block;
    padding: 4px 12px;
}
a:hover, a.active {
    border-color: black;
    color: black;
}
.note {
    color: grey;
}

JavaScript

$('.nav li a').click(function(){
    $('.nav li a.active').removeClass('active');
    $(this).addClass('active');
});