Bootstrap tabs - anchor tag - cannot start anchor tag with "active" class

I’m trying to use bootstrap’s tabs using classes like nav, nav-pills, nav-item, and nav-link. I wanted the tabs to start off with one of the tabs active. so I add the active class manually to one of the anchor tags but after the attached life cycle happens the active class gets removed. I add the active class on the element with the class “tab-pane” and that works. The active class does not get removed from that element. I tried removing all the javascript that we are using. We are using typescript and javascript in this project. mainly typescript. I tested to make sure it was happening after the attached lifecycle hook. I don’t know what’s going on.

We actually figured out the problem, it was because the anchor tag had an href on it. This is weird because to get the bootstrap behavior we need the href to specify the id of the element that we want to toggle between when using tabs and accordions. We figured out an aurelia way of doing it but its still weird.