Question

基于ngif功能，我正在使用angular隐藏和显示不同的div，

.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

选项1

在html中添加[ngClass]="{'current':showTab == 1}。

Working code:

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

See working code

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

Answer 2

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

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

2 个答案: