CODEWITHSUNDEEP
javascript
JLi_2398
JLi_2398

Reputation: 95

Navigation Bar - Switch Active Link with JavaScript

I have this responsive navigation bar (Works just didn't add the JS function for < 768px screens - Expand to more than 768px for nav links): https://jsfiddle.net/q2g4jvLn/

HTML Code for relevant nav section:

<div class="sidenav" id="sideNavBar">
  <div class="nav-brand">
    <div class="nav-heading">
      <h2>Navbar</h2>
    </div>
    <div class="nav-icon">
      <i id="expand-icon" class="fas fa-fw fa-angle-double-left fa-2x"></i>
    </div>
  </div>

  <div class="sidenav-links">
    <a class="active">
      <i class="fas fa-fw fa-id-card fa-2x"></i>
      <p class="link">Link 1</p>
    </a>

    <a>
      <i class="fas fa-fw fa-graduation-cap fa-2x"></i>
      <p class="link">Link 2</p>
    </a>

    <a>
      <i class="fas fa-fw fa-briefcase fa-2x"></i>
      <p class="link">Link 3</p>
    </a>

    <a>
      <i class="fas fa-fw fa-smile-beam fa-2x"></i>
      <p class="link">Link 4</p>
    </a>
  </div>
</div>

And for each link, I want to use JavaScript to change the active state for when a user clicks on a different link. I'm wondering how I'm able to achieve this?

Upvotes: 0

Views: 90

Answers (1)

Pedro Estrada
Pedro Estrada

Reputation: 224

For this you're gonna need a couple things:

  1. Javascript Selectors
  2. Adding Event Listener (e.g. click)
  3. Modifying Classes

Upvotes: 1

Related Questions