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.
 
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
 
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;
...Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
Thanks Osgood - That works perfectly.
Looking forward to getting to know Javascript better - Soon as I get some breathing space 🙂