CSS -标签样式，其中活动按钮是唯一的东西下面没有线

Question

所以，我试图找到如何样式一组选项卡看起来类似于此，在非活动按钮下方有一条线，而活动按钮缺少下划线。

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

任何帮助都将是非常感激的。

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

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

HTML:

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

CSS:

.tab {
overflow: hidden;
background-color: white;
height: 4vh;
margin-top: 1vh;
width: 97%;
margin-left: auto;
margin-right: auto;
}
.tab button {
border-radius: 2px;
background-color: inherit;
height: 100%;
margin-left: 4px;
margin-right: 4px;
border: 1px solid transparent;
}
.tab button.active {
border-radius: 2px;
border: 1px solid lightgray;
color: rgb(72, 115, 255);
border-bottom: 0;
}

TS:

//default Values for classes and styles
activeTabClass: string = "active";
defaultTabClass: string = "";
displayOn: string = "block";
displayOff: string = "none";
//Starting values for tabs
memberTabClass = this.activeTabClass;
eventTabClass = this.defaultTabClass;
currentTab = 0;
memberDisplay = this.displayOn;
eventDisplay = this.displayOff;
changeTab(tab: number){
if(tab==0 && tab!=this.currentTab){
this.memberTabClass=this.activeTabClass;
this.eventTabClass=this.defaultTabClass;
this.currentTab=0;
this.memberDisplay=this.displayOn;
this.eventDisplay=this.displayOff;
}
else if(tab==1 && tab!=this.currentTab){
this.memberTabClass=this.defaultTabClass;
this.eventTabClass=this.activeTabClass;
this.currentTab=1;
this.memberDisplay=this.displayOff;
this.eventDisplay=this.displayOn;
}
}

Answer 1

重要的部分是:

• 将::after的内容添加到所有选项卡周围的div中。内容需要有absolute的border-bottom和position，他的父需要relative。将添加的内容移动到底部。
• 添加一个border-bottom到活动选项卡，颜色与你的选项卡风格混合。活动选项卡需要一个z-index来覆盖添加的内容。
• 添加一个透明的border到所有的标签，单独，因为标签会移动，当你添加javascript来改变活动标签。它们会移动，因为它们在添加到活动选项卡之前没有边框。如果你添加透明边框，它们不会移动，因为它们已经有透明边框了。

#container{
margin: 0 auto;
padding: 20px;
width: 600px;
height: 600px;
border: 1px solid black;
}
.tabs{
display: flex;
position: relative;

}
.tab{
border: 1px solid transparent;
padding: 20px;

}
.tabs::after{
content: "";
width: 100%;
border-bottom: 1px solid black;
position: absolute;
bottom: 0;
}
div.active{
border: 1px solid black;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid white;
z-index:2;
}

<div id="container">
<div class="tabs">
<div class="tab tab-1">Tab 1</div>
<div class="tab tab-2 active">Tab 2</div>
<div class="tab tab-3">Tab 3</div>
</div>
</div>