HUGO

Navigation Bar Assigning/Removing Class On Click

Hi All!

I posted a query here before and got great help from the community so thought i would post again, this may be a topic that people need help with often so hopefully if anyone can help it would be useful to people.

I have already added some code and have got as far as i can, any further help would be greatly appreicated.

I have a site where everything is almost perfect except the naviagtion bar. It works completely fine, but when you click on one of the options, no colours change so can seem confusing to the user.

To solve this, i added some jQuery to my project. The jQuery essentialy assigns a class on click, and also removes the class from the previous one that was clicked, this works - perfect!

However now the actual links in the navigation bar do not work, and I’m not sure why. When you click on the navigation bar, the colours change as i want, however i am longer taken to page2,page3 etc.

The html is question is in nav.html lines 3 - 9

The jQuery i added is in jquery.min.js, the very last line of code.

('#nav a').click(function(e) {e.preventDefault();(’#nav a’).removeClass(‘active’);(this).addClass('active');});(’#nav li’).click(function(e) {$(this).addClass(‘active’).siblings().removeClass(‘active’);});

The css that controls the syle is in _nav.scss line 61-68.

The link to my github is here > https://github.com/WillNaylor1994/Test999

Again huge thanks to anyone who takes the time to have a look.

Hi there,

Javascript/jQuery questions are off-topic in this forum.