Twitter bootstrap change active on navbar

Question

I have tried just about every iteration I can find to get this working.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <img src="tile.png" alt="Brand">
      </div>
      <div id="navbar" class="navbar-inverse collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-left">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#features">Features</a></li>
          <li><a href="#testimonials">Testimonials</a></li>
          <li><a href="#contact-us">Contact Us</a></li>
        </ul>

that is the navbar portion I am working on.

I have tried the following js/jquery at different times.

    $(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')

*The last one above works to move the active, but doesn't actually navigate

var menu = document.querySelector('nav.ul');
var anchors = menu.getElementsByTagName('a');

for (var i = 0; i < 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');
  }
}

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.

Answer 1

$(document).ready(function () {
    $('.navbar-left li').on('click', function (e) {
        $(this).addClass('active').siblings().removeClass('active');
    });
});

this one worked; I had a problem with indentation and a missin ) messing up the code the first time and didn't notice it.