导航栏项目突出显示

Question

我有一个关于导航栏的问题。我想在单击某个项目时突出显示导航栏项目，但我不知道是否需要为此使用 angular 或 css。你能稍微指导一下吗？

   <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a routerLink="/tasks" class="nav-link" href="#">Tasks</a>
        </li>
        <li class="nav-item">
          <a routerLink="/newTask" class="nav-link" href="#">New task</a>
        </li>
        <li class="nav-item">
          <a routerLink="/users" class="nav-link" href="#">Users</a>
        </li>
        <li class="nav-item">
          <a routerLink="/newProject" class="nav-link" href="#">New Project</a>
        </li>
      </ul>
    </div>

Answer 1

您可以使用 routerLinkActive，这将添加一个 css class，您可以将其用于样式设置。因此在下面的代码中，如果当前路由是 /newProject，列表项的样式将根据您的 active css class:

<li routerLinkActive="active">
  <a routerLink="/newProject" class="nav-link" href="#">New Project</a>
</li>

有关 routerLinkActive here 的更多信息。

导航栏项目突出显示

Navbar item highlight

css

angular-ui-bootstrap

bootstrap-4

angular