带有dropdown的药丸-激活dropdown

Question

我正在组装一个导航栏。代码如下：

<nav class="nav nav-pills">
  <a href="#" class="nav-item nav-link active" data-toggle="tab" routerLink="/home">
    <i class="fa fa-lg fa-home"></i> Home
  </a>
  <a href="#" class="nav-item nav-link" data-toggle="tab" routerLink="/alerts">
    <i class="fa fa-lg fa-bell"></i> Alerts
  </a>
  <div role="presentation" class="dropdown">

    <a class="dropdown-toggle nav-item nav-link" data-toggle="dropdown" href="#"
      role="button" aria-haspopup="true" aria-expanded="false">
      <i class="fa fa-lg fa-cog"></i> Settings
      <span class="caret"></span>
    </a>
    <div class="dropdown-menu">
      <a href="#" class="dropdown-item">Item 1</a>
      <a href="#" class="dropdown-item">Item 3</a>
    </div>
  </div>
</nav>

小提琴：Example

当我从下拉列表中选择某项内容时，如何使设置看起来处于活动状态？

谢谢

Answer 1

只需从第一个pill中删除硬编码的"active“类，并添加一些JS逻辑：

const navItems = document.querySelectorAll('.nav-item');
const settings = document.getElementById('settings');

for(var item of navItems) {
    item.addEventListener('click', (e) => {
       for(let item of navItems) item.classList.remove('active');
       e.target.classList.add('active');
    });
}