title: Bootstrap navbar can't add active with JavaScript
body: <p>I used Bootstrap , now I want to add <code>active</code> for the new navbar title when I jump to the new page, but the <code>active</code> cann't dynamic display , unless I manually refresh the new page.</p>
  
  <p>The Html codes: </p>
  
  <pre><code>&lt;ul class="nav navbar-nav " data-in="fadeInDown" data-out="fadeOutUp"&gt;
    &lt;li class="NavHead active"&gt; &lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li class="NavHead"&gt; &lt;a href="/questions"&gt;Questions&lt;/a&gt;&lt;/li&gt;
    &lt;li class="NavHead"&gt; &lt;a href="/tags" &gt;Tags&lt;/a&gt;&lt;/li&gt;
    &lt;li class="NavHead"&gt; &lt;a href="/knowledges" &gt;Knowledges&lt;/a&gt;&lt;/li&gt;
    &lt;li class="NavHead"&gt; &lt;a href="/company"&gt;Company&lt;/a&gt;&lt;/li&gt;
    &lt;li class="NavHead"&gt; &lt;a href="/activity"&gt;Activity&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The JavaScript codes:</p>
  
  <pre><code>$(document).ready(function () {
      'use strict';
      $(function () {
          $(".navbar-nav").find(".NavHead").each(function () {
              if ($("a",this).attr("href") === window.location.pathname) {
                  $(this).addClass("active");
              } else {
                  $(this).removeClass("active");
              }
          });
      });
  });
  </code></pre>
  
  <p>How should I to revise the JS?</p>