CSS для выделения активных вкладок

Question

Я создал вкладку и вызываю функцию по щелчку. Я сталкиваюсь с трудностями при написании CSS согласно приведенному ниже требованию.

1. Активная вкладка должна быть показана синим цветом подчеркивания.

2. При щелчке на вкладке синяя полоса должна появиться под активной вкладкой. (это похоже на вкладки углового материала), но я не хочу использовать угловой материал

Ниже представлены созданные вкладки:

<div class="tab">
<button class="tablinks" (click)="function1()">Tab1</button>
<button class="tablinks" (click)="function2()">Tab2</button>
</div>

Ниже CSS пытается:

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

здорово, если кто-нибудь поможет, спасибо

Answer 1

1). Вот демонстрация стекаблита: https://stackblitz.com/edit/angular-rkcm9m

2). И фрагмент кода:

export class AppComponent  {
  name = 'Angular';
  selectedTab = "Tab1";

  makeActive(tab: string) {
    this.selectedTab = tab;
  }
}

.tab {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: white;
}

.tab button {
  background-color: inherit;
  border-bottom: 2px solid transparent;
  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 {
  border-bottom: 2px solid blue;
}

.tabcontent {
  display: block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<div class="tab">
  <button class="tablinks" [ngClass]="{'active': (selectedTab == 'Tab1') }" (click)="makeActive('Tab1')">Tab1</button>
  <button class="tablinks" [ngClass]="{'active': (selectedTab == 'Tab2') }" (click)="makeActive('Tab2')">Tab1</button>
</div>

Answer 2

Просто добавьте свой CSS:

.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;
}
.tablinks:focus {border-bottom:1.5px solid blue;}

<div class="tab">
<button class="tablinks" (click)="function1()">Tab1</button>
<button class="tablinks" (click)="function2()">Tab2</button>
</div>

Answer 3

В приведенном ниже примере используется bottom-border для получения желаемого эффекта. Цвет рамки по умолчанию белый, серый при наведении и синий при активной.

Код jquery полностью прокомментирован.

Дайте мне знать, если это не то, на что вы надеялись.

---

Демо

// Add click event to all tablinks
$(".tablinks").click(function() {

  // Remove active class from any other active tabs
  $(".tablinks.active").removeClass("active");

  // Add active class to the selected tab
  $(this).addClass("active");

});

.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;
  border-bottom: 3px solid white;
}

.tab button:hover {
  border-bottom-color: #ddd;
  background-color: #ddd;
}

.tab button.active {
  border-bottom-color: blue;
}

.tabcontent {
  display: block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab">
  <button class="tablinks" (click)="function1()">Tab1</button>
  <button class="tablinks" (click)="function2()">Tab2</button>
</div>