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

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.