How do I highlight active link in a menu

[Galeodan]

I know this should be easy but I just can't get it working. My site has a main topnav. It also has a submenu that jumps to various anchors in the body of the page.. In this example: the main menu opens the page "About Us". I set the "About Us' link active manually in that page. The submenu jumps to anchors in the body of the same page. They are "Who We Are", "Where We Are" and "The Journey". Because you can jump back and forth within the page, the active link has to be set with a script that highlights the choice you jumped to and unhighlights the other choices.

 

So far I have it so it will highlight the choice you jump to but it does not remove the highlight from the other choices. So they all end up highlighted.

        <div class="subnav" id="mySubnav">
            <a class="btn active" href="#whoweare">Who We Are</a>
            <a class="btn" href="#where-we-are">Where We Are</a>
            <a class="btn" href="#thejourney">The Journey</a>
        </div>
        <!--  -->

        <script>
            // Add active class to the current button (highlight it)
            var header = document.getElementById("mySubnav");
            var btns = header.getElementsByClassName("btn");
            for (var i = 0; i < btns.length; i++) {
                btns[i].addEventListener("click", function () {
                    var current = document.getElementsByClassName("active");
                    current[0].className = current[0].className.replace(
                        " active",
                        ""
                    );
                    this.className += " active";
                });
            }
        </script>

"Who We Are" is active initially as that's where you land when opening the page. I think I'm missing only a small detail here but I can't find it.

Thanks,

Sean

 

[osgood_ · Accepted solution]

Because you can jump back and forth within the page, the active link has to be set with a script that highlights the choice you jumped to and unhighlights the other choices.

By @Galeodan

You can add another loop inside the first loop to remove all the 'active' classes before this code is executed 'this.className += " active";' which adds the class 'active' to the anchor which has been clicked on (see in red below)

btns[i].addEventListener("click", function () {

for (var ii = 0; ii < btns.length; ii++) {
btns[ii].classList.remove('.active');
}

Below code will do the same but a bit more streamlined:

<script>
const subNav = document.querySelector("#mySubnav");
const subLinks = subNav.querySelectorAll('.btn')

subLinks.forEach(function(link) {
link.onclick = function() {
subLinks.forEach(function(link) {
link.classList.remove('active')
})
this.classList.add('active')
}
})

</script>

[Galeodan]

Thanks Osgood - That works perfectly. 

Looking forward to getting to know Javascript better - Soon as I get some breathing space 🙂