title: Twitter Bootstrap Tabs not changing on click
body: <p>I am using Twitter Bootstrap v2.1.1 and its tabbable feature.</p>
  
  <p><strong>Problem:</strong> When any of the tabs are clicked, the <code>tab-pane</code> does not change, although the state of the tab buttons <code>.tab</code> itself changes. In other words, the tab buttons appear depressed when you click on it, but the content that's supposed to change with the tabs do not. A <code>console.log()</code> shows that the click event is being fired. Any ideas?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- Tab Bar --&gt;
  &lt;div class="tab-bar"&gt;
      &lt;div class="tab active" id="photos" data-toggle="tab" data-target="#photos"&gt;
          &lt;p&gt;Photos&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="tab" id="details" data-toggle="tab" data-target="#details"
          &gt;&lt;p&gt;Details&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Tab Panes --&gt;
  &lt;div class="tab-content"&gt;
      &lt;div id="photos" class="tab-pane"&gt;Photos&lt;/div&gt;
      &lt;div id="details" class="tab-pane"&gt;Details&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('.tab-bar').tab();
  $('.tab-bar .tab').click(function(e) {
      e.preventDefault();
      $(this).tab('show');
      console.log('show');
  })
  </code></pre>
  
  <p><strong>JS Includes</strong></p>
  
  <pre><code>&lt;script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"&gt;&lt;/script&gt;
  </code></pre>