时间戳

首页 > 解决方案 > CSS 突出显示活动选项卡

html - CSS 突出显示活动选项卡

问题描述

我已经创建了一个选项卡并在单击时调用了一个函数我在按照以下要求编写 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;
}

如果有人可以帮助，那就太好了，谢谢

标签： htmlcssbootstrap-4tabsangular7

解决方案

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

推荐阅读