使用jQuery的样式bootstrap药片

Question

我正在尝试使用jquery在bootstrap药丸上应用click事件，但我无法决定使用jquery执行click事件的目标或标记，以便点击引导程序丸处于活跃状态。

html {
  padding: 0px;
  margin: 0px;
}

.div-nav {
  background-color: #0077ff;
  height: 60px;
  width: 100%;
}

.container-fluid {
  padding: 0px;
  margin: 0px;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #0077ff;
  background-color: white;
}

.nav-pills .nav-link {
  border-radius: 4.0rem;
  margin-top: 10px;
  color: white;
}

.nav.nav-pill.nav-justified li a {
  width: 10px;
}

.nav {
  margin-left: 30%;
}

<div class="container-fluid ">
  <div class="div-nav" id="nav-toogle">
    <nav class="nav nav-pills nav-justified">
      <a class="nav-link active" href="#">Active</a>
      <a class="nav-link" href="#">Longer nav link</a>
      <a class="nav-link" href="#">Link</a>
    </nav>
  </div>
</div>