angular4簡單實現選項卡功能

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章