Q:

I am trying to use vanilla JS to highlight clicked anchor and remove the previously highlighted anchor

This is my first post and I don't know what I am doing yet, so please bear with me.
I am trying to use vanilla JS to highlight a clicked anchor and remove the previously highlighted anchor.
I am not sure why it is not working but I am new at this.
My CodePen
below is just the JS. .nav-link is the link class. active is the class that should manipulate it after the click.
window.onload = afterClick;

function afterClick(){
 //set an on off array to toggle. 
  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!

A:

Instead of onload you can listen to hashchange event instead to achieve this like:
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");
  }
});

So, whenever the url hash will change, it will remove the active class from all the links using:
linkClass.forEach(x => x.classList.remove("active"))

and then it will search for the link having that hash and add the active class to that link only using:
document.querySelector('a[href="' + hash + '"]').classList.add("active");

Working Demo:

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>
  <a class="nav-link" href="#Oceanic_White_Tip">Oceanic White Tip</a>
  <a class="nav-link" href="#Bull_Shark">Bull Shark</a>
  <a class="nav-link" href="#Tiger_Shark">Tiger Shark</a>
</nav>
<main id="main-doc">
  <section class='main-section' id="About_Sharks">
    <header>About Sharks</header>
    </br>

    <ul><span style="font-size: 2.1em; margin-left: 5px;">B</span>efore we can talk about the most deadly sharks in the world, there are a few interesting facts that will help you understand sharks as a species better.</br>
      </br>
      <li>Sharks do not have bones</li>
      <p>Sharks use their gills to filter oxygen from the water. They are a special type of fish known <i>Elasmobranch</i>, which translates into: </br>fish made of cartilaginous tissues—the clear gristly stuff that your ears and nose tip are made of. This
        category also includes rays, sawfish, and skates. Their cartilaginous skeletons are much lighter than true bone and their large livers are full of low-density oils, both helping them to be buoyant. </p>

      <p>Even though sharks don't have bones, they still can fossilize. As most sharks age, they deposit calcium salts in their skeletal cartilage to strengthen it. The dried jaws of a shark appear and feel heavy and solid; much like bone. These same minerals
        allow most shark skeletal systems to fossilize quite nicely. The teeth have enamel so they show up in the fossil record too.</p>
      </br>
      <li>Most sharks have good eyesight</li>
      <p>Most sharks can see well in dark lighted areas, have fantastic night vision, and can see colors. The back of sharks’ eyeballs have a reflective layer of tissue called a tapetum. This helps sharks see extremely well with little light.</p>
      <br><br>
      <li>Sharks have special electroreceptor organs</li>
      <p>Sharks have small black spots near the nose, eyes, and mouth. These spots are the <i>ampullae of Lorenzini</i> – special electroreceptor organs that allow the shark to sense electromagnetic fields and temperature shifts in the ocean.</p>
      <br>
      <li>Shark skin feels similar to sandpaper</li>
      <p>Shark skin feels exactly like sandpaper because it is made up of tiny teeth-like structures called placoid scales, also known as dermal denticles. These scales point towards the tail and help reduce friction from surrounding water when the shark
        swims.
      </p>
      <br>
      <li>Sharks can go into a trance</li>
      <p>When you flip a shark upside down they go into a trance like state called tonic immobility. This is the reason why you often see sawfish flipped over when our scientists are working on them in the water.</p>
      </br>
      <li>Sharks have been around a very long time</li>
      <p>Based on fossil scales found in Australia and the United States, scientists hypothesize sharks first appeared in the ocean around 455 million years ago.</p>
      <br>
      <li>Scientists age sharks by counting the rings on their vertebrae</li>
      <p><code>Vertebrae contain concentric pairs of opaque and translucent bands. Band pairs are counted like rings on a tree and then scientists assign an age to the shark based on the count. Thus, if the vertebrae has 10 band pairs, it is assumed to be 10 years old. Recent studies, however, have shown that this assumption is not always correct. Researchers must therefore study each species and size class to determine how often the band pairs are deposited because the deposition rate may change over time. Determining the actual rate that the bands are deposited is called <i>validation</i>.</code></p>
      <br>
      <li>Blue sharks are really blue</li>
      <p><code>The blue shark displays a brilliant blue color on the upper portion of its body and is normally snowy white beneath. The mako and porbeagle sharks also exhibit a blue coloration, but it is not nearly as brilliant as that of a blue shark. In life, most sharks are brown, olive, or grayish.</code></p>
      <br>
      <li>Each whale shark’s spot pattern is unique as a fingerprint</li>
      <p>Whale sharks are the biggest fish in the ocean. They can grow to 12.2 meters and weigh as much as 40 tons by some estimates! Basking sharks are the world's second largest fish, growing as long as 32 feet and weighing more than five tons.</p>
      <br>
      <li>Some species of sharks have a spiracle that allows them to pull water into their respiratory system while at rest</li>
      <p>Most sharks have to keep swimming to pump water over their gills A shark's spiracle is located just behind the eyes which supplies oxygen directly to the shark's eyes and brain. Bottom dwelling sharks, like angel sharks and nurse sharks, use this
        extra respiratory organ to breathe while at rest on the seafloor. It is also used for respiration when the shark's mouth is used for eating.</p>
      <br>
      <li>Not all sharks have the same teeth</li>
      <p>
        Mako sharks have very pointed teeth, while white sharks have triangular, serrated teeth. Each leave a unique, tell-tale mark on their prey. A sandbar shark will have around 35,000 teeth over the course of its lifetime! </p>
      <br>
      <li>Different shark species reproduce in different ways</li>
      <p>
        Sharks exhibit a great diversity in their reproductive modes. There are oviparous (egg-laying) species and <i>viviparous</i> (live-bearing) species. Oviparous species lay eggs that develop and hatch outside the mother's body with no parental care
        after the eggs are laid.</p>

  </section>
  <section class='main-section' id="The_Great_White">
    <header>The Great White</header>
    <ul>
      The legendary great white shark is far more fearsome in our imaginations than in reality. As scientific research on these elusive predators increases, their image as mindless killing machines is beginning to fade.

      </br>
      </br>
      <li>Shark Attacks</li>

      Of the <i><b>100-plus</b></i> annual shark attacks worldwide, fully one-third to one-half are attributable to great whites. However, most of these are not fatal, and new research finds that great whites, who are naturally curious, are "sample biting"
      then releasing their victims rather than preying on humans. It's not a terribly comforting distinction, but it does indicate that humans are not actually on the great white's menu.

      </br>
      </br>
      <li>Characteristics</li>

      Great whites are the largest predatory fish on Earth. They grow to an average of 15 feet in length, though specimens exceeding 20 feet and weighing up to 5,000 pounds have been recorded. They have slate-gray upper bodies to blend in with the rocky coastal
      sea floor, but get their name from their universally white underbellies. They are streamlined, torpedo-shaped swimmers with powerful tails that can propel them through the water at speeds of up to 15 miles per hour. They can even leave the water
      completely, breaching like whales when attacking prey from underneath.

      </br>
      </br>
      <li>Hunting Adaptations</li>

      Highly adapted predators, their mouths are lined with up to 300 serrated, triangular teeth arranged in several rows, and they have an exceptional sense of smell to detect prey. They even have organs that can sense the tiny electromagnetic fields generated
      by animals. Their main prey items include sea lions, seals, small toothed whales, and even sea turtles, and carrion.

      </br>
      </br>
      <li>Population</li>

      </code>Found in cool, coastal waters throughout the world, there is no reliable data on the great white's population. However, scientists agree that their number are decreasing precipitously due to overfishing and accidental catching in gill nets, among
      other factors, and they are considered a vulnerable species.</code>
    </ul>
  </section>
  <section class='main-section' id="Oceanic_White_Tip">
    <header>Oceanic White Tip</header>
    <ul>
      </br>
      <li>Characteristics</li>
      This is an active, almost fearless shark also associated with human attacks. MarineBio considers this shark the most potentially dangerous after great whites, tiger, and bull sharks, especially for open-ocean divers. This species is likely responsible
      for open-ocean attacks following air or sea disasters.
      </br>
      </br>
      <li>Behavior</li>
      Oceanic whitetips can be very aggressive and unpredictable in the presence of potential prey. Sold commercially fresh, frozen, smoked, and dried-salted for human consumption; hides for leather, fins for shark fin soup, liver oil for vitamins, and processed
      into fishmeal.
      </br>
      This species is a widespread and common large pelagic shark of warm oceanic waters. It presumably has a low reproductive capacity, but is extremely abundant and wide-ranging and is subject to fishery pressure as a common bycatch species with tuna and
      other pelagic species. This bycatch is reportedly either inadequately reported or unrecorded. The fins are highly prized in trade although the carcass is often discarded. Fishery pressure is likely to persist, if not increase in future, and the
      impact of this fishing pressure is presently unknown.
      </br>
      </br>
      <li>Population</li>

      <code>The oceanic whitetip shark, <i>Carcharhinus longimanus</i>, is listed as Critically Endangered.</code>
    </ul>
  </section>
  <section class='main-section' id="Bull_Shark">
    <header>Bull Shark</header>
    <ul>
      Bull sharks are aggressive, common, and usually live near high-population areas like tropical shorelines. They are not bothered by brackish and freshwater, and even venture far inland via rivers and tributaries.

      </br>
      </br>
      <li>Human Encounters</li>

      Because of these characteristics, many experts consider bull sharks to be the most dangerous sharks in the world. Historically, they are joined by their more famous cousins, great whites and tiger sharks, as the three species most likely to attack humans.

      </br>
      </br>
      <li>Characteristics</li>

      Bull sharks get their name from their short, blunt snout, as well as their pugnacious disposition and a tendency to head-butt their prey before attacking. They are medium-size sharks, with thick, stout bodies and long pectoral fins. They are gray on top
      and white below, and the fins have dark tips, particularly on young bull sharks.

      </br>
      </br>
      <li>Hunting</li>

      They are found cruising the shallow, warm waters of all the world’s oceans. Fast, agile predators, they will eat almost anything they see, including fish, dolphins, and even other sharks. Humans are not, per se, on their menus. However, they frequent
      the turbid waters of estuaries and bays, and often attack people inadvertently or out of curiosity.

      </br>
      </br>
      <li>Threats to Survival</li>

      <code>Bull sharks are fished widely for their meat, hides, and oils, and their numbers are likely shrinking. One study has found that their average lengths have declined significantly over the past few decades.</code>
    </ul>
  </section>
  <section class='main-section' id="Tiger_Shark">
    <header>Tiger Shark</header>
    <ul>
      Tiger sharks are named for the dark, vertical stripes found mainly on juveniles. As these sharks mature, the lines begin to fade and almost disappear.

      </br>
      </br>
      <li>Shark Attacks</li>

      These large, blunt-nosed predators have a duly earned reputation as man-eaters. They are second only to great whites in attacking people. But because they have a near completely undiscerning palate, they are not likely to swim away after biting a human,
      as great whites frequently do.

      </br>
      </br>
      <li>Hunting</li>

      They are consummate scavengers, with excellent senses of sight and smell and a nearly limitless menu of diet items. They have sharp, highly serrated teeth and powerful jaws that allow them to crack the shells of sea turtles and clams. The stomach contents
      of captured tiger sharks have included stingrays, sea snakes, seals, birds, squids, and even license plates and old tires.

      </br>
      </br>
      <li>Population</li>

      Tiger sharks are common in tropical and sub-tropical waters throughout the world. Large specimens can grow to as much as 20 to 25 feet in length and weigh more than 1,900 pounds.

      </br>
      </br>
      <li>Threats to Survival</li>

      <code>They are heavily harvested for their fins, skin, and flesh, and their livers contain high levels of vitamin A, which is processed into vitamin oil. They have extremely low repopulation rates, and therefore may be highly susceptible to fishing pressure. They are listed as near threatened throughout their range.</code>
    </ul>
  </section>
</main>

