angular5实现tab切换

 

点击左边按钮，右边form表单切换；

html大致结构：

<ul>
  <li [ngClass]="{active:activeIndex == i}" *ngFor="let item of tabs;let i = index" class="tab-index-btn" (click)="tabShow(i)">
    {{item}}
  </li>
</ul>

<from *ngFor="let item of froms；let i = index">

　　{{ item}}

</from>

基本配置：

   activeIndex ; //定义变量

   tabs = ['基本信息','告警设置','修改密码' ]; //按钮

froms = ['1','2','3'];//form内容 当然你可以不用循环 单个写定义内容也一样 我这只是懒省事。。。。

/**
 * tab点击切换不同form表单
 * @param index
 */
tabShow(index){
  this.activeIndex = index;
}

有两种方法；

方法一：直接显示隐藏