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.

            <nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light sticky-top" id="ftco-navbar">
                <div class="container">

                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="fa fa-bars"></span> Menu
                    </button>
                    <div class="collapse navbar-collapse" id="ftco-nav">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li>
                            <li class="nav-item"><a href="#aboutus" class="nav-link">About</a></li>
                            <li class="nav-item"><a href="#serviceslink" class="nav-link">Services</a></li>
                            <li class="nav-item"><a href="#projectslink" class="nav-link">Project</a></li>
                            <li class="nav-item"><a href="#bloglink" class="nav-link">Blog</a></li>
                            <li class="nav-item"><a href="#roofinglink" class="nav-link">Roofing</a></li>
                            <li class="nav-item"><a href="#contactlink" class="nav-link">Contact</a></li>
                        </ul>
                        <div class="d-flex align-items-center justify-content-center">
                            <img src="images/logos/weathertight-logo.png" class="logosmaller" alt=""/>
                            <!-- <span class="flaticon-roof-2"></span> -->
                        </div>
                        <div class="col-3 d-flex justify-content-end align-items-center">
                            <div class="social-media">
                                <p class="mb-0 d-flex">
                                    <a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-facebook"><i class="sr-only">Facebook</i></span></a>
                                    <a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-twitter"><i class="sr-only">Twitter</i></span></a>
                                    <a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-instagram"><i class="sr-only">Instagram</i></span></a>
                                    <a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-dribbble"><i class="sr-only">Dribbble</i></span></a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
            <!-- END nav -->

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.

Clicking "Learn More" on the first slide does indeed navigate to the "Get a Quote" section. The top part is obscured by the sticky nav, but it is navigating there. — kmoser, Mar 05 '22 at 20:06
Correct but, when you click ABOUT or any other MENU, "HOME" active menu goes away but the active COLOR doesn't work or appear for the other menu items. — Peter The Angular Dude, Mar 05 '22 at 20:13

kmoser · Accepted Answer · 2022-03-06T19:02:15.347

1

Your click handler on the <a> tags is adding/removing the .active class to the <a> tag but it should be doing it to the parent <li> 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 <li class="nav-item"> tags, not the <a> 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');
}

edited Mar 06 '22 at 19:02

answered Mar 05 '22 at 20:15

kmoser

8,780
3
24
40

THANK YOU! That did it! One more thing, however. When I click on any menu item, the problem in the second image still occurs, but you got me on the correct track. THANK YOU again. – Peter The Angular Dude Mar 05 '22 at 20:43
@PeterTheAngularDude What do you mean by "the problem in the second image?" Do you mean the "Learn More" links that aren't working? That's because they link to `"#"` instead of `"#getAQuote"`. – kmoser Mar 05 '22 at 21:55
No, what I meant was, if you refresh the page without clicking on any menu item, and scroll to the "Roofing Services We Offer" you'll see the default is "spray foam roofing" as selected and the description is there. BUT, when you "click" on a menu and then scroll down, the description is not there nor is the default item active. Something is messing with the active class "if" you click on a menu item rather than scroll. Finally, when you click on Blog, Roofing is selected and if you click Roofing, Contact is selected. Weird. But the ID's / Targets are correct. – Peter The Angular Dude Mar 06 '22 at 01:35
@PeterTheAngularDude That's because the JS code for the top nav that makes items active/inactive also deactivates all the items on the "Roofing Services We Offer" nav. I've updated my answer so that should no longer happen. – kmoser Mar 06 '22 at 03:49
Thank you so much. YOU ROCK! But OOPS! Now when I click on a menu item, the ACTIVE feature doesn't get remove. They keep getting added. Sorry to bother you. Let me see if I can work this out. I'll keep you posted. Thank you. – Peter The Angular Dude Mar 06 '22 at 16:16
Fixed it! Here's the updated fix... it was a minor oversight... 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'); } – Peter The Angular Dude Mar 06 '22 at 16:25
Yes, I forgot the leading '#'. I've updated my answer. – kmoser Mar 06 '22 at 19:02
No worries. Also, this last wee bit of an issue. whenever I click on the menu item, BLOG, ROOFING highlights. When I click on ROOFING, CONTACT highlights which is weird as the anchors are correct and there are only TWO; the calling anchor and the ID to which the anchor points. WAIT! When you scroll, the menu's change like they're supposed to but as you scroll to Blog, Roofing is active and when you scroll to roofing, contact is active. I think the SECTIONS are a bit off targeting. – Peter The Angular Dude Mar 06 '22 at 19:15
When I scroll, or click any top nav item, it highlights all nav items *through* the one selected. I suggest you check your event handlers and any code that adds the `.active` class. – kmoser Mar 06 '22 at 19:42
Roger that sir. I fixed it, just haven't posted it yet. Thanks. – Peter The Angular Dude Mar 06 '22 at 20:05

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

1 Answers1

Linked