Question

我正在使用打字稿和组件以角度使用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

如何在打字稿的标签菜单中突出显示活动标签

1 个答案: