Tengo mi CTA que se ve así,
<div class="heading__link"> <a class="heading__cta" href="#about">View my work</a> </div>y tengo mi navegador que se ve así,
<nav id="nav-bar" class="nav-bar"> <ul class="nav"> <li class="nav__item"><a class="nav__link" href="#home">Home</a></li> <li class="nav__item"><a class="nav__link" href="#about">About</a></li> <li class="nav__item"><a class="nav__link" href="#projects">Projects</a></li> <li class="nav__item"><a class="nav__link" href="#contact">Contact</a></li> </ul> </nav>Ahora, estoy tratando de descubrir cómo resaltar mi navegación 'acerca de' cada vez que hago clic en mi CTA con JavaScript. Idealmente, debería permanecer resaltado a menos que haga clic en otros enlaces.
Creo que se puede resolver simplemente agregando la clase .active pero no puedo hacer que funcione con un CTA.
function highlight(){ let about_link = document.getElementById('about'); about_link.classList.toggle('highlight'); } .highlight{ background-color:red; } <div class="heading__link"> <a class="heading__cta" onClick="highlight()" href="#about">View my work</a> </div> <nav id="nav-bar" class="nav-bar"> <ul class="nav"> <li class="nav__item"><a class="nav__link" href="#home">Home</a></li> <li class="nav__item"><a id='about' class="nav__link" href="#about">About</a></li> <li class="nav__item"><a class="nav__link" href="#projects">Projects</a></li> <li class="nav__item"><a class="nav__link" href="#contact">Contact</a></li> </ul>puedes hacerlo así