title: How do I set a bootstrap tab active?
body: <p>I am using Twitter Bootstrap for a tabular interface. When I click on a tab, I am calling an function that hides and shows corresponding divs. This is my HTML Code:</p>
  
  <pre><code>&lt;ul class="nav nav-tabs"&gt;
      &lt;li class="active" id="Chart1"&gt;&lt;a href="#"&gt;Chart 1&lt;/a&gt;&lt;/li&gt;
      &lt;li  id="Chart2"&gt;&lt;a href="#"&gt;Chart 2&lt;/a&gt;&lt;/li&gt;
      &lt;li  id="Chart3"&gt;&lt;a href="#"&gt;Chart 3&lt;/a&gt;&lt;/li&gt;
      &lt;li  id="Chart4"&gt;&lt;a href="#"&gt;Chart 4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>Based on that, I am using the following jquery to show and hide content:</p>
  
  <pre><code>$(document).ready(function(){
     $("#pie").hide();
     $("#bar").hide();
     $("#Chart2").click(function(){
       $("#StateWise").hide();
       $("#pie").show();
     });
     $("#Chart3").click(function(){
         $("#StateWise").hide();
         $("#pie").hide();
         $("#bar").show();
     });
  });
  </code></pre>
  
  <p>How can I do that on click, the active class changes to that particular tab?</p>