Bootstrap Navigation (Pills)

by Matthew Keefe

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div style="padding: 10px;">
    <ul class="nav nav-pills">
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
    </ul>
</div>

JavaScript

// select first list item
//$("li:first").addClass("active");

// select third list item
var liToSelect = 3;
$(".nav.nav-pills li:eq("+(liToSelect-1)+")").addClass("active");

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