Highlighting active link in navigation

by Gulam Jilani

HTML

<nav>
    <ul>
        <li class="active"><a href="#" title="Intro">Intro</a></li>
        <li><a href="http://shop-thumbnails.s3-website-ap-southeast-1.amazonaws.com/9493/artwork_642/640x640/black_100_frame_art_landscape.jpg" target="blank" title="What We Do">What We Do</a></li>
        <li><a href="#" title="How We Do It">How We Do It</a></li>
        <li><a href="#" title="Our Modus Operandi">Our Modus Operandi</a></li>
    </ul>
</nav>

CSS

body {
    font-family:'Arial';
}
ul {
    list-style: none;
}
li {
    float: left;
    margin-right: 15px;
}
a, a:hover {
    color: #000;
    text-decoration: none;
}
nav ul li:hover, nav ul li.active {
    border-bottom: 3px solid #e12a1a;
}

JavaScript

$('nav a').click(function () {
    $(".active").removeClass("active");
    $(this).closest('li').addClass("active");
    var theClass = $(this).attr("class");
    $('.' + theClass).parent('li').addClass('active');
});