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 background colors and everything, however, I changed my CSS to be similar but when I scroll down or click on the menu item the active class does not switch. Not sure what I'm doing wrong.

HTML:

<ul class="menu">     <li><a href="#" aria-current="page">Home</a></li>     <li><a href="#about">About Us</a></li>     <li><a href="#contact">Contact</a></li> </ul> 

CSS:

.menu {   list-style:none; } .menu > li {   float: left; } .menu > li > a {   color: #555;   float: none;   padding: 10px 16px 11px;   display: block; } .menu > li > a:hover {   color: #F95700; } .menu a[aria-current="page"], .menu a[aria-current="page"]:hover {   color:#F95700; } 

I checked the files; jQuery, bootstrap.js and bootstrap.css are all linked properly. Do I have to add some additional jQuery in or am I missing some CSS to get the active to switch like the subnav menu on their site?

Answer 1

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(); });