Как применить класс к элементу, на который был выполнен щелчок, и удалить его из предыдущего элемента?

Question

Я использую angular, чтобы скрывать и показывать разные div, основываясь на функции ngif, в настоящее время у меня есть это.

.html

<div class="boxes">
<div class="box" (click)="tabToggle(1)">box1</div>
<div class="box" (click)="tabToggle(2)">box2</div>
<div class="box" (click)="tabToggle(3)">box3</div>
<div class="box" (click)="tabToggle(4)">box4</div>
<div class="box" (click)="tabToggle(5)">box5</div>
</div>

<div *ngIf="showTab == 1" class="box1-content">Lorem ipsum 1</div>
<div *ngIf="showTab == 2" class="box2-content">Lorem ipsum 2</div>
<div *ngIf="showTab == 3" class="box3-content">Lorem ipsum 3</div>
<div *ngIf="showTab == 4" class="box4-content">Lorem ipsum 4</div>
<div *ngIf="showTab == 5" class="box5-content">Lorem ipsum 5</div>

Вот реальная ссылка: https://stackblitz.com/edit/angular-8reazh?embed=1&file=src/app/app.component.ts

Мне было интересно, как я могу применить класс к выбранному элементу "box". Например, поле, которое в настоящий момент выбрано, имеет синий фон, а когда я нажимаю на другое поле, оно становится синим, а предыдущее окно снова становится красным

Answer 1

в html

<div class="boxes">
<div class="box" (click)="tabToggle(1)" [class.selected]="selectedbox == 1">box1</div>
<div class="box" (click)="tabToggle(2)" [class.selected]="selectedbox == 2">box2</div>
<div class="box" (click)="tabToggle(3)" [class.selected]="selectedbox == 3">box3</div>
<div class="box" (click)="tabToggle(4)" [class.selected]="selectedbox == 4">box4</div>
<div class="box" (click)="tabToggle(5)" [class.selected]="selectedbox == 5">box5</div>
</div>

<div *ngIf="showTab == 1" class="box1-content">Lorem ipsum 1</div>
<div *ngIf="showTab == 2" class="box2-content">Lorem ipsum 2</div>
<div *ngIf="showTab == 3" class="box3-content">Lorem ipsum 3</div>
<div *ngIf="showTab == 4" class="box4-content">Lorem ipsum 4</div>
<div *ngIf="showTab == 5" class="box5-content">Lorem ipsum 5</div>

в машинописном файле записать

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  showTab = 1;
  selectedbox: number = 1;
  tabToggle(index){
    this.selectedbox = index;
    this.showTab =index;
  }
}

в файле css добавить этот класс

.selected {
  background-color: black;
  color: white;
}

Answer 2

Вариант 1

Добавить [ngClass]="{'current':showTab == 1} в html.

Рабочий код:

<div class="boxes">
<div class="box" (click)="tabToggle(1)" [ngClass]="{'current':showTab == 1}">box1</div>
<div class="box" (click)="tabToggle(2)" [ngClass]="{'current':showTab == 2}">box2</div>
<div class="box" (click)="tabToggle(3)" [ngClass]="{'current':showTab == 3}">box3</div>
<div class="box" (click)="tabToggle(4)" [ngClass]="{'current':showTab == 4}">box4</div>
<div class="box" (click)="tabToggle(5)" [ngClass]="{'current':showTab == 5}">box5</div>
</div>

в CSS:

.current{
   background: blue;
}

Вариант 2

Использование [style.background]

См. Рабочий код

<div class="boxes">
<div class="box" (click)="tabToggle(1)" [style.background]="showTab == 1?'blue':'red'">box1</div>
<div class="box" (click)="tabToggle(2)" [style.background]="showTab == 2?'blue':'red'">box2</div>
<div class="box" (click)="tabToggle(3)" [style.background]="showTab == 3?'blue':'red'">box3</div>
<div class="box" (click)="tabToggle(4)" [style.background]="showTab == 4?'blue':'red'">box4</div>
<div class="box" (click)="tabToggle(5)" [style.background]="showTab == 5?'blue':'red'">box5</div>
</div>