title: Bootstrap 3 Togglable Tabs not working
body: <p>I'm writing a mobile app using phonegap and bootstrap using the main navbar to switch between  my view or tab however the togglable list (example <a href="http://getbootstrap.com/2.3.2/javascript.html#tabs" rel="nofollow">here</a>) doesn't seem to work.  Does anyone know how to fix this?   </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if lt IE 7]&gt;      &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7]&gt;         &lt;html class="no-js lt-ie9 lt-ie8"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;         &lt;html class="no-js lt-ie9"&gt; &lt;![endif]--&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class="no-js"&gt; &lt;!--&lt;![endif]--&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
          &lt;meta name="format-detection" content="telephone=no" /&gt;
  
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" /&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
          &lt;title&gt;Cancer Resource Application&lt;/title&gt;
          &lt;meta name="description" content="http://www.cancerresource-al.org"&gt;
          &lt;meta name="viewport" content="width=device-width"&gt;
          &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="css/bootstrap-theme.min.css"&gt;
          &lt;link rel="stylesheet" href="css/main.css"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
      &lt;div class="navbar navbar-inverse navbar-fixed-bottom navbar-cenerted" role="navigation"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="index.html"&gt;Cancer Resource Application&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse"&gt;
              &lt;ul class="nav nav-tabs " id='tabs'&gt;
  
                  &lt;li&gt;&lt;a class="text-muted" href="#search" data-toggle="tab"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;Search&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a class="text-muted" href="#resource" data-toggle="tab"&gt;&lt;span class="glyphicon glyphicon-th"&gt;&lt;/span&gt;
                  Resources&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a class="text-muted" href="#list"&gt;&lt;span class="glyphicon glyphicon-list" data-toggle="tab"&gt;&lt;/span&gt;List&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a class="text-muted" href="#favorites"  data-toggle="tab"&gt;&lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt;Favorites&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='tab-content'&gt;
          &lt;div class='tab-pane fade in active' id='search'&gt;
              &lt;ul&gt;&lt;li&gt;...search&lt;/li&gt;&lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class='tab-pane fade' id='resoucre'&gt;
              &lt;ul&gt;&lt;li&gt;...resource&lt;/li&gt;&lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class='tab-pane fade' id='list'&gt;
              &lt;ul&gt;&lt;li&gt;...list&lt;/li&gt;&lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class='tab-pane fade' id='favorite'&gt;
              &lt;ul&gt;&lt;li&gt;...favorites&lt;/li&gt;&lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/vendor/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="phonegap.js"&gt;&lt;/script&gt;
          &lt;script src="js/main.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $('#tabs a').click(function (e) {
              e.preventDefault();
              $(this).tab('show');})
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>