javascript - 如何在 typescript 中突出显示选项卡菜单中的事件选项卡

Question

我正在使用 typescript 和组件以 Angular 使用 js 选项卡菜单，但我无法添加通过更改其背景颜色来突出显示事件选项卡的功能

COMPONENT.HTML 中的 TABMENU 代码

<div class="tabnav">
        <button class="buttontab left" (click)="openTab('direct')" >Direct Receipt</button>
        <button class="buttontab right" (click)="openTab('sto')" >STO Receipt</button>
</div>

COMPONENT.TS 中的 JS 函数

 openTab(tab) : void {
    var tabname = tab;
    var i;
    var x = document.getElementsByClassName("content");
    for (i = 0; i < x.length; i++) {
      (<any>x[i]).style.display = "none"; 
    }
    document.getElementById(tabname).style.display = "block";   
  }

Answer 1

可以这样做:

@Component({
  selector: "my-app",
  template: `
    <div class="tabnav">
      <button [ngClass]="{ active: isActive(1) }" (click)="openTab(1)">
        Direct Receipt
      </button>
      <button [ngClass]="{ active: isActive(2) }" (click)="openTab(2)">
        STO Receipt
      </button>

      <div [hidden]="!isActive(1)">
        <h4>Direct Receipt Content</h4>
      </div>
      <div [hidden]="!isActive(2)">
        <h4>STO Receipt Content</h4>
      </div>
    </div>
  `,
  styles: [
    `
      .active {
        border-color: blue;
      }
    `
  ]
})
export class AppComponent {
  name = "Angular";
  tab = 1;

  isActive(tabId): boolean {
    return this.tab === tabId;
  }

  openTab(tabId): void {
    this.tab = tabId;
  }
}

Online Demo