nav not switching to active

[ivo1981]

Hi, I'm having some trouble with the menu's. I think some scripting is missing. I am using the cover template an my menu looks like this:

ul.nav.masthead-nav
    li.active
    a(href="/#") Home
    li
    a(href="/#features") Features
   li
    a(href="/documetation") Documentation
   li
    a(href="/control") Control
   li
    a(href="/technical") Technical
   li
    a(href="/#contact") Contact

The hover functions are working correctly(css), however the active tabs are not switching on clicking or scrolling.

I tried adding code to fix the menu:

append scripts
    script.
$(document).ready(function () {
    $('.nav li a').click(function(e) {

        $('.nav li').removeClass('active');

        var $parent = $(this).parent();
        if (!$parent.hasClass('active')) {
            $parent.addClass('active');
        }
        e.preventDefault();
    });
});

This fixes the menu, but breaks the links.

I want to achieve the effect you have on the rightside menu on http://rajasegar.github.io/JADE-Bootstrap/components.html

Any help would be appriciated. Ivo

[ivo1981]

I found the source, but don't know how to fix it. the problem is scrollspy. _bootstap.jade has a target of .scrollspy, so I tried adding that to the ul like so: ul.nav.masthead-nav.scrollspy but without any result