我正在創建一個基于 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;
}
當我在當前頁面中時，如何讓它改變按鈕（主頁、登錄、注冊）的顏色？（例如，當我在主頁時，按鈕將變為綠色，在登錄時 - 將變為綠色）
uj5u.com熱心網友回復：
您可以使用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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/431279.html
標籤：javascript html css 有角度的
上一篇：HashMap與List作為Typescript中的值
下一篇：動態和隱藏欄位的反應式表單驗證