CSS突出显示活动标签

时间:2019-06-14 12:06:29

标签: html css bootstrap-4 tabs angular7

我已经创建了一个选项卡,并在单击时调用一个函数,但我无法按照以下要求编写CSS。

1。活动标签应显示为蓝色下划线。

2。单击选项卡,蓝线应位于活动选项卡下。 (类似于类似于角材料的标签),但我不想使用角材料

下面是创建的标签:

<div class="tab">
<button class="tablinks" (click)="function1()">Tab1</button>
<button class="tablinks" (click)="function2()">Tab2</button>
</div>

下面是CSS尝试:

.tab {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: white;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 14px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: blue;
}

.tabcontent {
  display: block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

如果有人帮忙,太好了,谢谢

3 个答案:

答案 0 :(得分:0)

下面的示例使用bottom-border来获得所需的效果。边框颜色默认为白色,悬停时为灰色,激活时为蓝色。

jquery代码已完全注释。

让我知道这是否不是您想要的。


演示

// Add click event to all tablinks
$(".tablinks").click(function() {

  // Remove active class from any other active tabs
  $(".tablinks.active").removeClass("active");

  // Add active class to the selected tab
  $(this).addClass("active");

});
.tab {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: white;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 14px;
  transition: 0.3s;
  font-size: 17px;
  border-bottom: 3px solid white;
}

.tab button:hover {
  border-bottom-color: #ddd;
  background-color: #ddd;
}

.tab button.active {
  border-bottom-color: blue;
}

.tabcontent {
  display: block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab">
  <button class="tablinks" (click)="function1()">Tab1</button>
  <button class="tablinks" (click)="function2()">Tab2</button>
</div>

答案 1 :(得分:0)

1)。这是一个stackblitz演示:https://stackblitz.com/edit/angular-rkcm9m

2)。和代码片段:

export class AppComponent  {
  name = 'Angular';
  selectedTab = "Tab1";

  makeActive(tab: string) {
    this.selectedTab = tab;
  }
}
.tab {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: white;
}

.tab button {
  background-color: inherit;
  border-bottom: 2px solid transparent;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 14px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  border-bottom: 2px solid blue;
}

.tabcontent {
  display: block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
<div class="tab">
  <button class="tablinks" [ngClass]="{'active': (selectedTab == 'Tab1') }" (click)="makeActive('Tab1')">Tab1</button>
  <button class="tablinks" [ngClass]="{'active': (selectedTab == 'Tab2') }" (click)="makeActive('Tab2')">Tab1</button>
</div>

答案 2 :(得分:0)

只需添加以下内容即可:

.tab {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: white;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 14px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: blue;
}

.tabcontent {
  display: block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tablinks:focus {border-bottom:1.5px solid blue;}
<div class="tab">
<button class="tablinks" (click)="function1()">Tab1</button>
<button class="tablinks" (click)="function2()">Tab2</button>
</div>