title: Twitter Bootstrap Tabs active class toggle not working
body: <p>I am using Twitter bootstrap nav tabs and nav pills. This is my html code:</p>
  
  <pre><code>&lt;div class="Header2" style="background-color:#1E3848"&gt;
      &lt;div id="headerTab"&gt;
          &lt;ul class="nav nav-tabs"&gt;
              &lt;li class="active ans-tab"&gt; &lt;a href="http://myweb.com/"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class="topTab"&gt;&lt;a href="http://myweb.com/score/"&gt;Score&lt;/a&gt;&lt;/li&gt;
              &lt;li class="topTab"&gt;&lt;a href="http://myweb.com/leaderboards/"&gt;Leaderboards&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="subHeaderTabPlayer"&gt;
          &lt;ul class="nav nav-pills"&gt;
              &lt;li class="active"&gt; &lt;a href="http://myweb.com/"&gt;Top&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://myweb.com/rules/" data-toggle="pill"&gt;Rules&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://myweb.com/player/" data-toggle="pill"&gt;Player&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://myweb.com/categories/" data-toggle="pill"&gt;Categories&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now if I add attribute <code>data-toggle="pill"</code> and  <code>data-toggle="tab"</code> the tab with active class change to one which I have clicked. However, <code>href</code> is no longer working. 
  If I do not use these classes, <code>href</code> works but active class does not change and it always stays to the element that class was given at the load of page. </p>
  
  <p>I even tried using jQuery to toggle class behavior and it does not work as well. My script code is:</p>
  
  <pre><code>&lt;script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(window).load(function(){
          document.getElementById( 'subHeaderTabPlayer' ).style.display = 'none';
          $('ul.nav-tabs li a').click(function (e) {
              var activeTab= document.getElementByClass('active');
              activeTab.removeAttribute("class");
  
              $('ul.nav-tabs li.active').removeClass('active')
              $(this).parent('li').addClass('active')
          })
          $('ul.nav-pills li a').click(function (e) {
              $('ul.nav-pills li.active').removeClass('active');
              $(this).parent('li').addClass('active');
          })
          $(".ans-tab").click(function() {
              document.getElementById('subHeaderTabPlayer').style.visibility = 'visible';
              document.getElementById('subHeaderTabPlayer' ).style.display = 'block';
          });
          $(".topTab").click(function() {
              document.getElementById('subHeaderTabPlayer').style.visibility = 'collapse';
              document.getElementById('subHeaderTabPlayer' ).style.display = 'none';
          });
      });
  &lt;/script&gt;
  </code></pre>