javascript - 导航栏 - 使用 JavaScript 切换事件链接

Question

我有这个响应式导航栏(Works 只是没有为 < 768px 屏幕添加 JS 功能 - 对于导航链接扩展到超过 768px): https://jsfiddle.net/q2g4jvLn/

相关导航部分的 HTML 代码:

<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>

对于每个链接，我想使用 JavaScript 来更改用户单击不同链接时的事件状态。我想知道如何才能实现这一目标？

Answer 1

为此，您需要一些东西:

1. Javascript Selectors
2. Adding Event Listener (例如点击)
3. Modifying Classes