Changing menu options is NOT changing the active class even though I followed the solution in the link below

Question

So, the website I'm working on is: http://wtr2022.webparity.net/. The link for the example is below.

How to change active class while click to another link in bootstrap use jquery?

So, I'll show the code I'm using and wrote and where to find it in the JS file.

HTML: The below starts on line 77 when you open the DEBUG console or scroll to the tag.

JS: The below starts on line: 194 or scroll until you find this code.

        $('.navbar-nav li a').click((e) => {

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

            console.log("Argument for CLICK FUNCTION: ", e.currentTarget.innerHTML);
            console.log("CURRENT TARGET for CLICK FUNCTION: ", e.currentTarget.parentElement);

            if (e.currentTarget.innerHTML === "Services") {
                funcs.changeAboutImage('sprayfoam');
            }

            // add the active class to the link we clicked
            // console.log("THIS: ", $(this));

            $(this).addClass('active');

            // e.preventDefault();
        });

        /* Code for changing active link on clicking */
        let btns = $("#ftco-nav .navbar-nav .nav-link");

        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click",
                    () => {

                let current = document.getElementsByClassName("active");
                console.log("CURRENT: ", current);
                // current[0].className = current[0].className.replace(" active", "");
                // this.className += " active";
            });
        }

        /* Code for changing active
         link on Scrolling */
        $(window).scroll(() => {
            let distance = $(window).scrollTop();

            // console.log($(window).scrollTop());

            if ($(window).scrollTop() > 701) {
                $('#ftco-navbar').addClass('navbar-fixed');
            }
            if ($(window).scrollTop() < 700) {
                $('#ftco-navbar').removeClass('navbar-fixed');
            }

            $('.ftco-section').each(function (i) {

                if ($(this).position().top <= distance + 250) {
                    $('.navbar-nav a.active').removeClass('active');
                    $('.navbar-nav a').eq(i).addClass('active');
                }
            });
        }).scroll();

Here's what happens:

FIRST: When I click on the FIRST SLIDE, "Learn more..." button, it needs to scroll to the GET A QUOTE section so the YELLOW bar with the words, GET A QUOTE appear. It's not.

SECOND: If you start from the base URL http://wtr2022.webparity.net/ and SCROLL until the menu appears, you'll see HOME as active. BUT, when you click on About, or any other menu, the active menu fails to become highlighted.

THIRD When you start at the base URL and SCROLL to "Roofing Services We Offer", below, you'll see SPRAY FOAM ROOFING already active, BUT, whenever you click on a menu, the ACTIVE spray foam menu and content is not active and nothing is there UNLESS you click on it.

This is what happens when you CLICK on a menu and scroll to Roofing Services We offer:

I think that the ACTIVE menu is TIED together, meaning, when the addEventListener() is hit, it REMOVES ALL active classes from everything, hence, the reason.

If anyone can assist me, I'd appreciate it. Thank you.

kmoser · Accepted Answer

Your click handler on the tags is adding/removing the .active class to the tag but it should be doing it to the parent

tag:

$('#ftco-nav .navbar-nav li a').click((e) => {
  $('#ftco-nav .active').removeClass('active');
  $(e).parent().addClass('active');
  // ...
}

Your scroll handler has a similar problem. It should be adding/removing the .active class from the

tags, not the tags:

if ($(this).position().top <= distance + 250) {
  $('#ftco-nav .navbar-nav .nav-item.active').removeClass('active');
  $('#ftco-nav .navbar-nav a').eq(i).parent().addClass('active');
}

Changing menu options is NOT changing the active class even though I followed the solution in the link below

Answers (1)

Related Questions