How can I highlight my nav using a CTA (call-to-action)?

user_19419797 0
Viewed 24

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.

css html javascript
1 Answers

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

user_149373320
Related