Struggling with writing CSS to meet the following requirements after creating a tab and calling a function on click:
1. The active tab should display a blue underline color.
2. When clicking on a tab, the blue line should appear under the active tab (similar to angular material tabs, but without using angular material).
Here are the tabs created:
<div class="tab">
<button class="tablinks" (click)="function1()">Tab1</button>
<button class="tablinks" (click)="function2()">Tab2</button>
</div>
Here is the CSS being attempted:
.tab {
overflow: hidden;
border-bottom: 1px solid #ccc;
background-color: white;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 12px 14px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: blue;
}
.tabcontent {
display: block;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
Any help would be greatly appreciated. Thank you!