title: Twitter bootstrap change active on navbar
body: <p>I have tried just about every iteration I can find to get this working.</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
      &lt;div class="container-fluid navigation"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&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;img src="tile.png" alt="Brand"&gt;
        &lt;/div&gt;
        &lt;div id="navbar" class="navbar-inverse collapse navbar-collapse"&gt;
          &lt;ul class="nav navbar-nav navbar-left"&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#features"&gt;Features&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#testimonials"&gt;Testimonials&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#contact-us"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>that is the navbar portion I am working on.</p>
  
  <p>I have tried the following js/jquery at different times.</p>
  
  <pre><code>    $(document).ready(function () {
      $('.navbar-left li').on('click', function (e) {
          $(this).addClass('active').siblings().removeClass('active');
      });
  });
  
  
  
  
  $(".nav a").on("click", function(){
     $(".nav").find(".active").removeClass("active");
     $(this).parent().addClass("active");
  });
  
  
  $(document).ready(function(){
  $(".navbar-nav a").click(function(){
      $(this).tab('show');
  });
  
  
  $('.navbar-nav a').on('shown.bs.tab', function(event){
          var x = $(event.target).text();         // active tab
          var y = $(event.relatedTarget).text();  // previous tab
          $(".act span").text(x);
          $(".prev span").text(y);
      });
  });
  
  
  // Select all tabs
  $('.navbar-nav a').click(function(){
      $(this).tab('show');
  })
  
  // Select tab by name
  $('.navbar-nav a[href="#home"]').tab('show')
  
  // Select first tab
  $('.navbar-nav a[href="#features"]').tab('show')
  
  // Select last tab
  $('.navbar-nav a[href="#testimonials"]').tab('show')
  
  // Select fourth tab (zero-based)
  $('.navbar-nav a[href="#contact-us"]').tab('show')
  </code></pre>
  
  <p>*The last one above works to move the active, but doesn't actually navigate</p>
  
  <pre><code>var menu = document.querySelector('nav.ul');
  var anchors = menu.getElementsByTagName('a');
  
  for (var i = 0; i &lt; anchors.length; i += 1) {
    anchors[i].addEventListener('click', function() { clickHandler(anchors[i]) }, false);
  }
  
  function clickHandler(anchor) {
    var hasClass = anchor.getAttribute('class');
    if (hasClass !== 'active') {
      anchor.setAttribute('class', 'active');
    }
  }
  </code></pre>
  
  <p>Most of them don't do anything, but the ones that do work to change the active highlight when you click it doesn't actually navigate.  What am I missing here?  All I need this thing too do is change the highlight and navigate to the link.</p>