Add active class to current element

Test page : http://jsfiddle.net/dk5y7jz1/

window.onload = function() {
	var links = document.getElementById("myTopnav").getElementsByTagName("a");
  for(var i=0;i<links.length;i++) {
  	links[i].onclick = function() {
      document.getElementsByClassName("active")[0].className = "";
    	this.className = "active";
    }
  }
}

Select allOpen in new window

Thanks but this breaks the hamburger menu icon from appearing on smaller screens.

I should mention I have also used sub-menu drop down items e.g. https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp

hamburger menu icon?
I've no idea of what you're talking about...
your question was : "When the menu buttons are clicked the 'active' class doesn't change."
I believe it's now answered...

If you resize the window smaller from the Try it Yourself link in the tutorial you will see the three line menu icon in the top right. I believe this is called a 'hamburger' menu.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

Thanks for your help.

Try this code

window.addEventListener('load', function() {
  document.getElementById('myTopnav').querySelectorAll('a').forEach(function(aItem) {
    aItem.addEventListener('click', function(e) {
      e.preventDefault();
      document.querySelectorAll('.active').forEach(function(remItem) {
        remItem.classList.remove('active');
      });
      aItem.classList.add('active')
    });
  })
});

Select allOpen in new window

Working sample here

Thanks! That is changing the active class but breaks the menu links for the dropdowns.

Here is a jsfiddle for what I have (although for some reason the hamburger menu doesn't expand in the jsfiddle but does on my working version):

https://jsfiddle.net/jns_johnson/Lzqen8bo/

Sorry if I missed something.

Thanks! That is changing the active class but breaks the menu links for the dropdowns.

What drop downs? There were no dropdowns in the original question - did we move the goal posts?

I don't see the code I proposed in your fiddle either - so not sure how it was supposed to work.

Be that as it may - here is an updated code snippet and sample demonstrating its use

window.addEventListener('load', function() {
  document.getElementById('myTopnav').querySelectorAll('a, .ddropdown').forEach(function(aItem) {
    aItem.addEventListener('click', function(e) {
	  e.preventDefault();
      document.querySelectorAll('.active').forEach(function(remItem) {
        remItem.classList.remove('active');
      });
      aItem.classList.add('active');
    });
  })
});

Select allOpen in new window

Updated code sample here

Note: Because my sample boiler plate uses Bootstrap which changes the .dropdown style I have renamed the dropdown style in your code to ddropdown.

Thanks Julian, sorry I mentioned the dropdowns in my first comment after asking the original question but probably should have edited the question.

This is almost working but the menu links still don't seem to change the page, for me, but I can see the links display in the bottom right on hover.

I didn't leave your javascript on the jsfiddle as I wanted to provide a working version, but I've added it here now:
https://jsfiddle.net/jns_johnson/Lzqen8bo/10/

What could be stopping the links changing the page?

Many thanks for the explanation.
 
I can see now what I'm trying to achieve might be unnecessarily complicated for the result so will probably just ditch the active class all together!

Really grateful for your help, I'll accept as solution now.

You don't necessarily ditch it - it is about where you apply it. Doing it in JavaScript for your purposes won't achieve what you want - but adding it on the server when you render the page will.