Javascript 如何在typescript中突出显示tabmenu中的活动选项卡

我使用typescript和component在angular中使用js选项卡菜单，但我无法通过更改活动选项卡的背景颜色来添加突出显示该选项卡的功能

tab COMPONENT.HTML中的菜单代码

COMPONENT.TS中的JS函数

---

可以这样做：

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

---

您想如何突出显示它？通过改变背景颜色，通过添加阴影，通过添加缩小效果？通过改变背景color@AayushGupta从演示中可以看出，它工作正常。你有什么错误吗？我无法将你的这部分合并到我的代码中。如果可能的话，你能回答我的全部功能吗openTab@AayushGupta我是用CSS而不是样式做的。我想您在在线演示中没有看到app.component.css。请再看一遍，我不知道什么是var x=document.getElementsByClassNamecontent；为了更好地帮助您，但是您可以在openTab中做任何您喜欢的事情。这个变量x是存储我的内容div的变量。当选项卡切换时，内容正在切换

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

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