Question

我有一个这样的侧边栏：

        <li class="nav-item collapsed side" data-toggle="collapse" data-target="#home" ><li class="nav-item side">
            <a class="nav-link" href routerLinkActive="active" routerLink="">Home <span class="sr-only">(current)</span></a>
        </li>             
        <ul class="sub-menu collapse" id="home">

              <li class="nav-item list-unstyled"><a class="nav-link" href  routerLink="home/submenu-1">Submenu1</a></li>
              <li class="nav-item list-unstyled"><a class="nav-link" href  routerLink="home/submenu-2">Submenu2/a></li>
          </ul>
        <li class="nav-item side">
            <a class="nav-link" routerLink="firstOption">First Option</a>
         </li>
         <li class="nav-item side">
             <a class="nav-link"href routerLinkActive="active" routerLink="history">Second Option</a>
         </li>

如何制作，当我点击FirstOption时，FirstOption的背景颜色会发生变化，表明它处于活动状态。因为我可以浏览选项，所以当列表处于活动状态时，我无法更改背景颜色。此外，当我打开子菜单1或子菜单2时，我希望第一个家的子菜单保持打开状态。

谢谢。

Answer 1

使用此选项更改背景下拉菜单

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
  color: #fff;
  text-decoration: none;
  background-color: #00a65a;
  outline: 0;
}

在Angular 4中进行路由，使活动链接背景颜色发生变化

1 个答案: