How do I highlight active link in a menu

Explorer ,
Sep 07, 2021 Sep 07, 2021

Copy link to clipboard

Copied

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.

 

Snag_311bb47.png

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

Views

77

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Sep 08, 2021 Sep 08, 2021
quote

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;

...

Likes

Translate

Translate
LEGEND ,
Sep 08, 2021 Sep 08, 2021

Copy link to clipboard

Copied

quote

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>

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 08, 2021 Sep 08, 2021

Copy link to clipboard

Copied

LATEST

Thanks Osgood - That works perfectly. 

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines