带下拉菜单的药丸 - 使下拉列表处于活动状态

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>

和小提琴： 例

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

谢谢

Answer 1

只需从第一个药丸中删除硬编码的"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');
});
}