title: Twitter Bootstrap tabs not working: when I click on them nothing happens
body: <p>I am trying to implement Twitter Bootstrap tabs in the following code, but it does not seem to work. The tabs get displayed, but when I click on them nothing happens. Below is the only code I am using. All the other CSS/JS scripts are copied from Twitter Bootstrap framework.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;!-- Le styles --&gt;
  &lt;link href="assets/twitterbootstrap/css/bootstrap.css" rel="stylesheet"&gt;
  &lt;link href="assets/twitterbootstrap/css/bootstrap-responsive.css" rel="stylesheet"&gt;
  
  &lt;/head&gt;
  
  &lt;body data-spy="scroll" data-target=".subnav" data-offset="50"&gt;
  
  &lt;div class="container"&gt;
  
  &lt;!--------&gt;
  &lt;div id="content"&gt;
      &lt;ul class="nav nav-tabs" data-tabs="tabs"&gt;
          &lt;li class="active"&gt;&lt;a href="#red"&gt;Red&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#orange"&gt;Orange&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#yellow"&gt;Yellow&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#green"&gt;Green&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#blue"&gt;Blue&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="my-tab-content" class="tab-content"&gt;
          &lt;div class="tab-pane active" id="red"&gt;
              &lt;h1&gt;Red&lt;/h1&gt;
              &lt;p&gt;red red red red red red&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="orange"&gt;
              &lt;h1&gt;Orange&lt;/h1&gt;
              &lt;p&gt;orange orange orange orange orange&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="yellow"&gt;
              &lt;h1&gt;Yellow&lt;/h1&gt;
              &lt;p&gt;yellow yellow yellow yellow yellow&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="green"&gt;
              &lt;h1&gt;Green&lt;/h1&gt;
              &lt;p&gt;green green green green green&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="blue"&gt;
              &lt;h1&gt;Blue&lt;/h1&gt;
              &lt;p&gt;blue blue blue blue blue&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      jQuery(document).ready(function ($) {
          $(".tabs").tabs();
      });
  &lt;/script&gt;    
  &lt;/div&gt; &lt;!-- container --&gt;
  
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>