I have my CTA that looks like this,
<div class="heading__link">
<a class="heading__cta" href="#about">View my work</a>
</div>
and I have my nav that looks like this,
<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>
Now, I'm trying to figure out how to highlight my 'about' nav whenever I click my CTA with JavaScript. Ideally, it should stay highlighted unless I click on other links.
I think it can be solved by just adding .active class but I can't get it to work with a 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>you can do it like that