My goal is to utilize vanilla JavaScript to highlight the anchor that was clicked and then remove the highlighting from any previously highlighted anchor

Question

My goal is to utilize vanilla JavaScript to highlight the anchor that was clicked and then remove the highlighting from any previously highlighted anchor

Hello everyone, this is my first time posting here and I'm still trying to figure things out, so I appreciate your patience.

Currently, I am experimenting with vanilla JS to create a functionality where clicked anchors are highlighted while removing the highlight from previously selected anchors.

I'm encountering some issues with this feature and as a beginner, I'm still learning the ropes.

Here's a link to my CodePen

Below is the snippet of JS code related to this task. The links have a class of .nav-link and 'active' is supposed to manipulate them after being clicked.

window.onload = afterClick;


function afterClick(){
  let linkClass = document.querySelectorAll(".nav-link");
  
  linkClass.forEach(link => link.addEventListener("click", function(){
    if (link.classList.contains("active")) {
      link.classList.remove("active");  
    }
    link.classList.add("active");
  }));  
}

Thank you for your help and understanding!

javascript html css

Answer 1

Answer №1

If you want to achieve this without using the onload event, you can opt for the hashchange event instead. Here's how:

window.addEventListener("hashchange", () => {
  let hash = window.location.hash;
  if (hash) {
    let linkClass = document.querySelectorAll(".nav-link");
    linkClass.forEach(x => x.classList.remove("active"))
    document.querySelector('a[href="' + hash + '"]').classList.add("active");
  }
});

This code snippet will remove the active class from all links whenever there is a change in the URL hash:

linkClass.forEach(x => x.classList.remove("active"))

After that, it will add the active class only to the link with the corresponding hash:

document.querySelector('a[href="' + hash + '"]').classList.add("active");

Check out the Working Demo below:

window.addEventListener("hashchange", () => {
  let hash = window.location.hash;
  if (hash) {
    let linkClass = document.querySelectorAll(".nav-link");
    linkClass.forEach(x => x.classList.remove("active"))
    document.querySelector('a[href="' + hash + '"]').classList.add("active");
  }
});

#main-doc{font-family:Montserrat,sans-serif}#navbar{float:left;position:fixed;font-family:Montserrat,sans-serif;font-weight:700;min-width:230px;max-width:231px;height:100vh;background:url(https://image.freepik.com/free-vector/elegant-white-texture-background_23-2148431731.jpg);margin-top:-10px;margin-left:-10px;margin-right:40px;margin-bottom:25px;border:1px solid #000}#navbar header{padding:14px;font-size:1.8em;text-align:center;border:1px solid #000}#navbar a{display:block;color:#000;text-decoration:none;padding:15px;font-size:1.1em;text-align:center;border:1px solid #000;border-top:0}.main-section header{margin-left:30px;font-family:Notable,sans-serif;font-size:1.4rem}.main-section ul li{list-style-type:none;font-size:1.3em;padding-bottom:6px}.main-section{margin-left:230px;margin-right:50px;padding-top:20px}#main-doc{padding-bottom:60px}code{font-size:1rem;font-family:Montserrat,sans-serif}.active{color:orange!important;background-color:#00f!important}@media only screen and (max-width:425px){#navbar{max-width:425px;min-width:200px;position:relative;width:100vw;height:auto}.nav-link{margin-top:0;width:100vw}.main-section{margin-left:5px;margin-right:10px;padding-top:20px}.main-section ul{padding-left:5px}.navbar a{padding:0}}

<style>
  @import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Notable&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
</style>
<!-- font-family: 'Montserrat', sans-serif;
font-family: 'Notable', sans-serif;      -->

<nav id="navbar">
  <header style="color: #FFDF01 ;background: url(https://img.freepik.com/free-photo/blue-with-vignette-marble-texture-background-with-copy-space_23-2148327728.jpg?size=626&ext=jpg)">Common Sharks</header>
  <a class="nav-link" href="#About_Sharks" id="aboutSharks">About Sharks</a>
  <a class="nav-link" href="#The_Great_White">The Great White</a>

Answer 2

If you want to achieve this without using the onload event, you can opt for the hashchange event instead. Here's how:

window.addEventListener("hashchange", () => {
  let hash = window.location.hash;
  if (hash) {
    let linkClass = document.querySelectorAll(".nav-link");
    linkClass.forEach(x => x.classList.remove("active"))
    document.querySelector('a[href="' + hash + '"]').classList.add("active");
  }
});

This code snippet will remove the active class from all links whenever there is a change in the URL hash:

linkClass.forEach(x => x.classList.remove("active"))

After that, it will add the active class only to the link with the corresponding hash:

document.querySelector('a[href="' + hash + '"]').classList.add("active");

Check out the Working Demo below:

window.addEventListener("hashchange", () => {
  let hash = window.location.hash;
  if (hash) {
    let linkClass = document.querySelectorAll(".nav-link");
    linkClass.forEach(x => x.classList.remove("active"))
    document.querySelector('a[href="' + hash + '"]').classList.add("active");
  }
});

#main-doc{font-family:Montserrat,sans-serif}#navbar{float:left;position:fixed;font-family:Montserrat,sans-serif;font-weight:700;min-width:230px;max-width:231px;height:100vh;background:url(https://image.freepik.com/free-vector/elegant-white-texture-background_23-2148431731.jpg);margin-top:-10px;margin-left:-10px;margin-right:40px;margin-bottom:25px;border:1px solid #000}#navbar header{padding:14px;font-size:1.8em;text-align:center;border:1px solid #000}#navbar a{display:block;color:#000;text-decoration:none;padding:15px;font-size:1.1em;text-align:center;border:1px solid #000;border-top:0}.main-section header{margin-left:30px;font-family:Notable,sans-serif;font-size:1.4rem}.main-section ul li{list-style-type:none;font-size:1.3em;padding-bottom:6px}.main-section{margin-left:230px;margin-right:50px;padding-top:20px}#main-doc{padding-bottom:60px}code{font-size:1rem;font-family:Montserrat,sans-serif}.active{color:orange!important;background-color:#00f!important}@media only screen and (max-width:425px){#navbar{max-width:425px;min-width:200px;position:relative;width:100vw;height:auto}.nav-link{margin-top:0;width:100vw}.main-section{margin-left:5px;margin-right:10px;padding-top:20px}.main-section ul{padding-left:5px}.navbar a{padding:0}}

<style>
  @import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Notable&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
</style>
<!-- font-family: 'Montserrat', sans-serif;
font-family: 'Notable', sans-serif;      -->

<nav id="navbar">
  <header style="color: #FFDF01 ;background: url(https://img.freepik.com/free-photo/blue-with-vignette-marble-texture-background-with-copy-space_23-2148327728.jpg?size=626&ext=jpg)">Common Sharks</header>
  <a class="nav-link" href="#About_Sharks" id="aboutSharks">About Sharks</a>
  <a class="nav-link" href="#The_Great_White">The Great White</a>

Answer 3

Answer №2

The initial issue I came across is with your if loop:

if (link.classList.contains("active")) {
    link.classList.remove("active");  
  link.classList.add("active");
  }

This code block only works on an element that already has the "active" class, so it's currently not functioning as intended. By modifying the existing loop to remove the active class from other elements and then adding it to the clicked link, we can achieve the desired outcome:

window.onload = afterClick;

function afterClick() {
    let linkClass = document.querySelectorAll(".nav-link");
    // Add eventListener
    linkClass.forEach((originalLink) =>
        originalLink.addEventListener("click", function () {
            let linkElems = document.querySelectorAll(".nav-link");
            // Remove "active" class from other links
            linkElems.forEach((linkElem)=>{
                if (linkElem.classList.contains("active")) {
                    linkElem.classList.remove("active");
                }
            });
            // Add the "active" class to the clicked element
            originalLink.classList.add("active");    
        })
    );
}

I hope this explanation proves helpful! :)

Answer 4

The initial issue I came across is with your if loop:

if (link.classList.contains("active")) {
    link.classList.remove("active");  
  link.classList.add("active");
  }

This code block only works on an element that already has the "active" class, so it's currently not functioning as intended. By modifying the existing loop to remove the active class from other elements and then adding it to the clicked link, we can achieve the desired outcome:

window.onload = afterClick;

function afterClick() {
    let linkClass = document.querySelectorAll(".nav-link");
    // Add eventListener
    linkClass.forEach((originalLink) =>
        originalLink.addEventListener("click", function () {
            let linkElems = document.querySelectorAll(".nav-link");
            // Remove "active" class from other links
            linkElems.forEach((linkElem)=>{
                if (linkElem.classList.contains("active")) {
                    linkElem.classList.remove("active");
                }
            });
            // Add the "active" class to the clicked element
            originalLink.classList.add("active");    
        })
    );
}

I hope this explanation proves helpful! :)

My goal is to utilize vanilla JavaScript to highlight the anchor that was clicked and then remove the highlighting from any previously highlighted anchor

Answer №1

Answer №2

Similar questions

Is it possible to load Javascript using AJAX with jQuery?

What is the method for determining the data type of a column in an Excel sheet that has been

Monitoring and refining console.error and console.log output in CloudWatch

Using WEBGL to Showcase Your Images: A Step-by-Step Guide

The expiration time and date for Express Session are being inaccurately configured

Utilizing React Typescript Discriminating Unions to choose between two different types based solely on props

Empty MongoDB array persists even after POST request

Utilizing Jquery for draggable/droppable functionality in combination with custom overflow styles

Looking to add the Ajax response data into a dropdown selection?

The API response indicating success is simply denoted as "Success: True", without any accompanying data

React component is unable to identify prop

Custom palette in Material UI design palette allows users to create

Tips for displaying multiple table rows when clicked

What is the best way to justify list items to the left?

Issues with 'Backspace' and 'Clear' buttons on HTML calculator preventing proper function in JavaScript

Enhance your website with a lightbox effect using FancyBox directly in your JavaScript code

Enhancing Vuejs Security: Best Practices and Tips for Secure Development

What is the best way to extract this content from the HTML using Selenium Webdriver?

Tab button that can be easily printed

What is the most effective approach for managing nested callbacks in Node.js/Expressjs?