HTML color of active tab-CodePudding

I am creating a web based app, and I am using Spring and Angular. I am writing the front end in the Angular folder, and I have this HTML code to be on every page(app.component.html) - it is a menu:

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

And I have this as css so it is centered and looking all nice.

.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;
  }

How do I get it to change the color of the buttons(Home, Login, Register) when I am in the current page? (for ex. when I'm in Home page the button will be green, when in Login - it will be green)

CodePudding user response：

You can use routerLinkActive which will add a CSS class to the element when the route is active.

<div >
  <!-- Centered link -->
  <div >
  </div>
  <div >
    <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;
}