is there a way to highlight default component in CSS until another one is clicked-CodePudding

.pill-nav a:focus{
    background-color: black;

}
</style>
</head>
<body>
 
  <div >
    <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

CodePudding user response：

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>

CodePudding user response：

I am not much familiar with Angular but if you can access DOM then the focus() method seems fine to me

document.getElementsByTagName('a')[0].focus();

.pill-nav a:focus{
    background-color: black;
}

<div >
    <a href='#'>
      Programs
    </a>
 </div>
 <a href="#">Another One</a>