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

只需从第一个药丸中删除硬编码的“活动”类并添加一些JS逻辑即可：

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

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

带有下拉菜单的药-使下拉菜单处于活动状态

1 个答案: