Bootstrap Navigation (Pills)

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<h3>Normal</h3>
<div style="padding: 10px;">
    <ul class="nav nav-pills">
        <li><a href="#">Home</a></li>
        <li><a href="#">Resume</a></li>
        <li class="active"><a href="#">Contact</a></li>
    </ul>
</div>
<h3>Changed</h3>
<div style="padding: 10px;">
    <ul class="nav nav-pills your_nav_class">
        <li><a href="#">Home</a></li>
        <li><a href="#">Resume</a></li>
        <li class="active"><a href="#">Contact</a></li>
    </ul>
</div>

CSS

.your_nav_class .active a,.your_nav_class .active a:hover,.your_nav_class .active a:focus {
        background-color: #536872;
        color: white;
    }

JavaScript

// dynamically activate list items when clicked
$(".nav.nav-pills li").on("click",function(){
  $(".nav.nav-pills li").removeClass("active");
  $(this).addClass("active");
});