CSS 突出显示活动选项卡

Posted

技术标签:

【中文标题】CSS 突出显示活动选项卡【英文标题】:CSS to highlight the active tabs 【发布时间】:2019-10-29 01:45:45 【问题描述】:

我创建了一个选项卡并在点击时调用了一个函数,我在按照以下要求编写 CSS 时遇到了困难。

1.active 选项卡应以蓝色下划线颜色显示。

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;

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

【问题讨论】:

看getbootstrap.com/docs/4.3/components/navs How to set bootstrap navbar active class with Angular JS?的可能重复 【参考方案1】:

下面的示例使用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>

【讨论】:

【参考方案2】:

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>

【讨论】:

您的示例运行良好,唯一的问题是在标签底部下划线之间切换时上下移动,任何解决方案,感谢您的帮助 我更新了 stackblitz 示例 - 我刚刚为两个按钮添加了透明边框:stackblitz.com/edit/angular-rkcm9m【参考方案3】:

只需简单地添加你的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;

.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>

【讨论】:

以上是关于CSS 突出显示活动选项卡的主要内容,如果未能解决你的问题,请参考以下文章

如何在适当的选项卡中保持突出显示?

html 突出显示选项卡:版本5

html 突出显示选项卡:版本4

html 突出显示选项卡:版本3

html 突出显示选项卡:版本2

html 突出显示选项卡:版本1