活动选项卡的HTML颜色

Question

我正在创建一个基于web的应用程序，我正在使用Spring和Angular。我正在Angular文件夹中写前端，我在每个页面上都有这个HTML代码(app.component.HTML(——它是一个菜单：

<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
</div>
<div class="topnav-right">
<a routerLink="/home" >Home</a>
<a routerLink="/login" >Login</a>
<a routerLink="/register" >Register</a>
</div>
</div>

我有这个css，所以它是居中的，看起来很好。

.topnav {
position: relative;
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav-right {
float: right;
}

当我在当前页面时，如何更改按钮的颜色(主页、登录、注册(？(例如，当我在主页时，按钮将为绿色，当我登录时，它将为绿色(

Answer 1

您可以使用routerLinkActive，当路由处于活动状态时，它将向元素添加一个CSS类。

<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
</div>
<div class="topnav-right">
<a routerLink="/home" routerLinkActive="active-link">Home</a>
<a routerLink="/login" routerLinkActive="active-link">Login</a>
<a routerLink="/register" routerLinkActive="active-link">Register</a>
</div>
</div>

.topnav-right a.active-link {
color: #ff0000;
}