Needs to toggle 'active' class when navigation list items are selected
<p>I am using twitter bootstrap and trying to set 'active' class to the navigation list item by using jquery when a list item is selected.</p>

<p>Below is my code
</p>

<pre><code>            &lt;ul class="nav nav-pills pull-right"&gt;
              &lt;li id="home"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li id="gadget"&gt;&lt;a href="/category/gadgets"&gt;&lt;span&gt;Gadgets + Geeky&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li id="toys"&gt;&lt;a href="/category/toys"&gt;&lt;span&gt;Toys&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li id="wearables"&gt;&lt;a href="/category/wearables"&gt;&lt;span&gt;Wearables&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li id="home_office"&gt;&lt;a href="/category/home-office"&gt;&lt;span&gt;Home + Office&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li id="food_drinks"&gt;&lt;a href="/category/food-drinks"&gt;&lt;span&gt;Food + Drinks&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li id="kids"&gt;&lt;a href="/category/kids"&gt;&lt;span&gt;Kids Stuff&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;script&gt;
              $( document ).ready(function() {
                 $('ul li').click(function() {
                    // remove classes from all
                    $('li').removeClass('active');
                    // add class to the one we clicked
                    $(this).addClass("active");
                 });
              });
            &lt;/script&gt;
</code></pre>

<p></p>

<p>But when i click on a list item, temporarily active class is getting set on the navigation item, but the page is getting refreshed and showing the current clicked list item without active class.</p>

<p>i have followed the instructions mentioned in <a href="http://stackoverflow.com/questions/6459581/toggle-active-class-in-nav-bar-with-jquery">Toggle active class in nav bar with JQuery</a>
with no success.</p>

<p>Could someone point out what i am missing.</p>

<p>Thanks</p>
