title: Bootstrap navbar Active State not working
body: <p>I have bootstrap v3.</p>
  
  <p>I use the <code>class="active"</code> on my<code>navbar</code> and it does not switch when I press menu items.  I know how to do this with <code>jQuery</code> and build a click function but I'm thinking this functionality should be included in bootstrap?  So maybe it is a JavaScript issue?</p>
  
  <p>Here is my header with my js/css/bootstrap files I have included:</p>
  
  <pre><code>&lt;!-- Bootstrap CSS --&gt;
  &lt;link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" /&gt;
  &lt;link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /&gt;
  &lt;link rel="stylesheet" href= "/stylesheets/styles.css" /&gt;
  
  &lt;!--jQuery --&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Bootstrap JS --&gt;
  &lt;script src="/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="/bootstrap/js/bootstrap-collapse.js"&gt;&lt;/script&gt;
  &lt;script src="/bootstrap/js/bootstrap-transition.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here is my <code>navbar</code> code:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse"&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.php"&gt;MyBrand&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="collapse navbar-collapse navbarCollapse"&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li class="active"&gt;
                          &lt;a href="/index.php"&gt;Home&lt;/a&gt;
                      &lt;/li&gt;
  
                      &lt;li&gt;
                          &lt;a href="/index2.php"&gt; Links&lt;/a&gt;
                      &lt;/li&gt;
  
                      &lt;li&gt;
                          &lt;a href="/history.php"&gt;About&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="/contact.php"&gt;Contact&lt;/a&gt;
                      &lt;/li&gt;
  
                      &lt;li&gt;
                          &lt;a href="/login.php"&gt;Login&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>Am I setting this up right?</p>
  
  <p><em>(On an unrelated note, but possible related? When the menu goes mobile, I click the menu button and it collapses.  Pushing it again does not un-collapse it though.  So this issue,. with the other, both signify wrong JavaScript setup perhaps?)</em></p>