Issue
.pill-nav a:focus{
background-color: black;
}
</style>
</head>
<body>
<div class="pill-nav">
<a routerLink='dcp'>
Programs
</a>
here I need the programs tab highlighted until another one is clicked on which is why I used focus but then this does not highlight it by default when the page is opened
Solution
Focus will change as soon as the user clicks somewhere so this isn't a great idea.
Your best bet is to use the RouterLinkActive attribute. This defines class(es) that should be added to the link if it points to the current URL.
https://angular.io/api/router/RouterLinkActive
.pill-nav a.active{
background-color: black;
}
<a routerLink='dcp' routerLinkActive='active'>
Programs
</a>
Answered By - Salketer
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.