Css 如何将类应用于已单击的元素，并将其从上一个元素中删除？

我使用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>

框1
框2
框3
方框4
方框5
同侧眼底1
同侧视野2
同侧视野3
同侧视野4
同侧视野5

这里是一个实时链接：

我想知道如何将类应用于所选的“box”元素。例如，当前选定的框具有蓝色背景，当我单击另一个框时，该框变为蓝色，而上一个框变回红色

在html中添加

[ngClass]=“{'current'：showTab==1}

选项2

使用

[style.background]

框1
框2
框3
方框4
方框5

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>

在css文件中添加这个类

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

---

您可以在类中使用条件…

不会使其他选项卡返回到以前的颜色@pramesh

<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>

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

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