bootstrap4 导航栏设置为活动 link

Question

我有一个导航栏，它在 nav-item 下方有一行并显示该项目处于活动状态。我很久以前就得到了片段，但没有来源。我想更改它，以便当用户单击它时，该行保留在导航项上。现在它出现在悬停状态。它使用 :hover 触发一些转换和更多样式。我应该添加什么 class 才能使 jquery 生效？

<nav class="navbar navbar-expand-sm"> <button class="navbar-toggler" type="button" data-target="#navigation"> <span class="navbar-toggler-icon"></span> </button>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item"> <a href="{% url 'terminal-management'  %}" class="nav-link"> Terminals </a> </li>
                <li class="nav-item"> <a href="{% url 'location-management'  %}" class="nav-link active"> Area & Rooms </a> </li>
            </ul>
        </div>
    </nav>

css


/*Admin employee navbar */
.nav-item::after {
  content: '';
  display: block;
  width: 0px;
  height: 2px;
  background: #233242;
  transition: 0.4s
}

.nav-item:hover {
  color:black;
}

.nav-item:hover::after {
  width: 100%
}

.nav-item {

  color:#233242;
}

.nav-link {
  padding: 25px 5px;
  transition: 0.2s;
  color:#233242;
}
.nav-link:hover {
  color:#233242;
}

html {
  overflow: hidden !important;
  background-color: black;
}

.image-td {
  width:100px;
  height:100px;
}
/*Admin employee navbar */

Answer 1

Bootstrap documentation 说：

Active states—with .active—to indicate the current page can be applied directly to .nav-links or their immediate parent .nav-items.

因此您需要将 active class 放在 nav-item 上才能使其生效。像这样：

<nav class="navbar navbar-expand-sm"> <button class="navbar-toggler" type="button" data-target="#navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
            <li class="nav-item active"> <a href="{% url 'terminal-management'  %}" class="nav-link"> Terminals </a> </li>
            <li class="nav-item"> <a href="{% url 'location-management'  %}" class="nav-link active"> Area & Rooms </a> </li>
        </ul>
    </div>
</nav>

您可能不需要为其定义自定义样式，但您可以使用此 css 选择器：

.nav-link.active {
  color: red;
}

bootstrap4 导航栏设置为活动 link

bootstrap4 navbar set active link

css

navigation

jquery

navbar

bootstrap-4