Bootstrap CSS Active Navigation

Question

On the Bootstrap website the subnav matches up with the sections and changes background color as you or scroll to the section. I wanted to create my own menu without all the

Answer 1

Looking at some of the other answers, if you want the webpage to scroll down to that section when a side menu is clicked then you don't want to preventDefault.

Additionally, you only need to remove the current active class and add a new one not search through all li's. You also want the code to not do anything when the list item you've selected is already active—not needlessly add and remove the same active class. Lastly you should put your event listener on the a element not the li as it has an easier time of triggering a click event on iPhones and tablets, etc. Could also use .delegate so you don't have to wait for a DOM ready event. So in the end I'd do something like this (I assume you've preloaded jQuery):

$('body').delegate('.menu li a', 'click', function(){
    var $thisLi = $(this).parents('li:first');
    var $ul = $thisLi.parents('ul:first');
    if (!$thisLi.hasClass('active')){
        $ul.find('li.active').removeClass('active');
        $thisLi.addClass('active');
    }
});

Answer 2

I use 2 1-liners, depending on how my nav is structured

Just make sure that none of your links have active class to start.

actual links

If your nav links are on separate HTML files (like a layout template in express.js that has a menu), you can do this:

$('ul.nav > li > a[href="' + document.location.pathname + '"]').parent().addClass('active');

hash links

If they are hashes, do this:

$('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); });

If you don't want to scroll on hash-click, return false:

 $('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); return false; });

Answer 3

I tried some of the top answers above, it works for ".active" class, but the links not working well, it still stays on the current page. Then I tried this:

var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

I found it here: Twitter Bootstrap add active class to li

Answer 4

In order to switch the class, you need to perform some JavaScript.

In jQuery:

$('.menu li a').click(function(e) {
  var $this = $(this);
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});

In JavaScript:

var menu = document.querySelector('.menu');
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');
  }
}

I hope this helps.

Answer 5

This is what I ended up with since you have to clear the others as well.

$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});

Answer 6

Tested and it works fine.

    $('.navbar li').click(function(e) {
        $('.navbar li.active').removeClass('active');
        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }

    });

  <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            . . . 
  </ul>