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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值