title: why the active state of bootstrap navbar item changes after page load is complete?
body: <p>i have bootstrap <code>navbar</code> with <code>navbar</code> text items on it. In my <code>action methods (MVC)</code> i have put the following code to highlight (or make active) the clicked item on <code>navbar</code></p>
  
  <pre><code>@section scripts
  {
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              $(document).on('click', '.navbar-menu-item', function (evt) {
  
                  var cat = $(this).text();
  
                  if (cat=='TV &amp; Audio')
                  {
                      $('#navbar li').removeClass('active');
                      $('a:contains("TV &amp; Audio")').parent().addClass('active');
                  }
                  else if (cat=='Cameras')
                  {
                      $('#navbar li').removeClass('active');
                      $('a:contains("Cameras")').parent().addClass('active');
                  }
              });
           });
     &lt;/script&gt;
  }
  </code></pre>
  
  <p>once the page is loaded the '<code>active</code>' jumps back to the previous active item. By default i have set the <code>'Home'</code> item as active in the <code>_layout.cshtml</code>. The main action method that calls all the pages has the above <code>js</code> code. When click the <code>navbar</code> item, for that moment it shows active but after it completes the page load it makes "Home" active again. Is there away to fix this?</p>