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 突出显示活动选项卡的主要内容,如果未能解决你的问题,请参考以下文章