所以，我试图找到如何将一组选项卡设置为类似于的样式，即在非活动按钮下面有一行，而活动按钮缺少下划线。

我的第一个想法是使用边框样式，让任何不活动的东西都有边框底部和活动按钮，让除了底部以外的任何地方都有边框。但是，这并不会导致整个区域都带有下划线。

不胜感激。

edit:为了澄清，我基本上有按钮，我使用这些按钮作为选项卡在内容之间切换，显示其中一个或另一个。我想要的是样式的标签和标签按钮，使它看起来类似于我提供的图像。我目前遇到的唯一问题是试图在active按钮下使原始div上的下边框消失。

以下是我当前的代码供参考:

HTML:

<div class="tab">
    <button [ngClass]="memberTabClass" (click)="changeTab(0)">Members</button>
    <button [ngClass]="eventTabClass" (click)="changeTab(1)">Events</button>
</div>

CSS:

<div class="tab">
    <button [ngClass]="memberTabClass" (click)="changeTab(0)">Members</button>
    <button [ngClass]="eventTabClass" (click)="changeTab(1)">Events</button>
</div>

TS:

<div class="tab">
    <button [ngClass]="memberTabClass" (click)="changeTab(0)">Members</button>
    <button [ngClass]="eventTabClass" (click)="changeTab(1)">Events</button>
</div>

顺晟科技：

重要部分是:

• 将内容添加到周围所有选项卡。内容需要有一个和一个的，他的父母需要是。将添加的内容移到底部。
• 向活动选项卡添加一个颜色与您选项卡的样式相混合的选项卡。活动选项卡需要一个Z索引来覆盖添加的内容。
• 为所有选项卡单独添加一个透明选项卡，因为当您添加javascript以更改活动选项卡时，选项卡会发生移动。它们将移动，因为它们在向活动选项卡添加边框之前没有边框。如果添加透明边框，则它们不会移动，因为它们已经具有透明边框。