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类。因此，在以下代码中，如果当前路线为/newProject，则列表项将根据您的active CSS类设置样式：

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

有关routerLinkActive here的更多信息。

导航栏项目亮点

1 个答案: