как выделить активные вкладки в угловых 6

Question

** все показывает отлично, но как выделить активный, я делаю без использования сторонних компонентов, я надеюсь, что кто-то может помочь мне с этим.

Спасибо. **

 <ul class="tabs">
<li [ngClass]=" {'active-tab': tab==1 }"><a (click)=" tab = 1 " href="javascript:void(0)">Tab 1</a></li>
<li [ngClass]=" {'active-tab': tab==2 }"><a (click)=" tab = 2 " href="javascript:void(0)">Tab 2</a></li>
<li [ngClass]=" {'active-tab': tab==3 }"><a (click)=" tab = 3 " href="javascript:void(0)">Tab 3</a></li>df
</ul>

<div class="tab-panel" id="tabPanel1" *ngIf="tab==1">
    ABC TAB 1
</div>
<div class="tab-panel" id="tabPanel2" *ngIf="tab==2">
    ABC TAB 2
</div>
<div class="tab-panel" id="tabPanel3" *ngIf="tab==3">
    ABC TAB 3
</div>

машинопись здесь

home.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  tab: number = 3;
  constructor() { }

  ngOnInit() {
  }

}

enter code here

Answer 1

Вы условно добавляете класс active-tab к выбранному элементу вкладки в списке. Используйте этот класс в CSS для выделения нужного элемента списка.

У вас есть <a> элемент привязки в элементах списка, но вы на самом деле не используете их атрибут href. Кроме того, элементы привязки не могут быть легко стилизованы без переопределения их стилей по умолчанию.

Вы можете заменить <a> элементы привязки элементами <span> и стилизовать их при необходимости.

HTML:

<ul class="tabs">
  <li [ngClass]=" {'active-tab': tab==1 }"><span (click)=" tab = 1 ">Tab 1</span></li>
  <li [ngClass]=" {'active-tab': tab==2 }"><span (click)=" tab = 2 ">Tab 2</span></li>
  <li [ngClass]=" {'active-tab': tab==3 }"><span (click)=" tab = 3 ">Tab 3</span></li>
</ul>

CSS:

.tabs li.active-tab {
  color: blue;
  text-decoration: underline;
}

Демонстрация в реальном времени на StackBlitz: https://stackblitz.com/edit/angular-7eomzn