<div>
<span *ngFor="let v of title;let i=index;" (click)="spanClick(i)" [ngClass]="{'div-title':i=== oindex}">{{v}}</span>
</div>
<div>
<div [hidden]="oindex !== 0" id="div1">内容1</div>
<div [hidden]="oindex !== 1" id="div2">内容2</div>
</div>
*ngFor=”let v oftitle;let i=index” 表示循环打印数组title中的元素,并且设置数组元素的下标赋值给变量i;
(click)=”spanClick(i)”给span绑定一个点击函数,当点击span时,oindex的值就变为span对应的下标的值;
[ngClass]="{'div-title':i=== oindex}" 当i===oindex为真时,当前标签的类名为div-title,然后会加载对应的类的css样式。
数组、变量、spanClick函数
export class AppComponent { title = ['标题1', '标题2']; oindex = 0; spanClick(i:any) { this.oindex = i; } }
css样式
.div-title{ border:1px solid #640000; font-size: larger; background: #00ffff; }