Skip to main content
Galeodan
Galeodan
Known Participant
September 8, 2021
Answered

How do I highlight active link in a menu

  • September 8, 2021
  • 1 reply
  • 413 views

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

 

    This topic has been closed for replies.
    Correct answer osgood_
    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>

     

     

    1 reply

    O
    osgood_Correct answer
    Legend
    September 8, 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; 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
      GaleodanAuthor
      Known Participant
      September 8, 2021

      Thanks Osgood - That works perfectly. 

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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices