Twitter-Bootstrap nav

Question

<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>
<script type="text/javascript" >
$("li:first").addClass("active");
$("ul.nav.nav-pills li").On("click", function () {
$(".nav.nav-pills li").removeClass("active");
$(this).addClass("active");
});
</script>

the javascript is not working, as I want the selected pill to be active.