如何更改此活动导航选项卡的颜色？
我正在尝试在 natab 处于活动状态时更改颜色。我正在使用 Bootstrap 4.1.3。
我希望看到橙色选项卡处于活动状态（单击），另一个白色选项卡（像现在一样）。我怎样才能在CSS中做到这一点？我在 Stackoverflow 上看到了很多问题，但其中任何一个都对我有帮助。
代码如下： HTML：
<div class="container" align="center">
<nav>
<div class="nav nav-tabs nav-fill nav-test" role="tablist">
<a class="nav-item nav-link active" id="nav-proxims-tab" data-toggle="tab" href="#nav-proxims" role="tab" aria-controls="nav-proxims" aria-selected="true">Pròxims</a>
<a class="nav-item nav-link" id="nav-historic-tab" data-toggle="tab" href="#nav-historic" role="tab" aria-controls="nav-historic" aria-selected="false">Històric</a>
</div>
</nav>
CSS
.nav-diables {
color: Black;
background-color: White;
text-decoration:none;
font-weight: bold;
}
.nav-diables > li.active {
color: White;
background-color: #FF7400 !important;
text-decoration:none;
font-weight: bold;
}
感谢您的帮助。
亲切的问候， 米盖尔
繁星淼淼1回答
-
神不在的星期二
这段代码将解决您的问题。.nav-item { color: black; background-color: white; text-decoration:none; font-weight: bold;}a.nav-item.nav-link.active { color: white; background-color: #f90; text-decoration:none; font-weight: bold;}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"></head><body> <div class="container"><nav class="nav nav-pills nav-justified" role="tablist"> <a class="nav-item nav-link active" id="nav-proxims-tab" data-toggle="tab" href="#nav-proxims" role="tab" aria-controls="nav-proxims" aria-selected="true">Pròxims</a> <a class="nav-item nav-link" id="nav-historic-tab" data-toggle="tab" href="#nav-historic" role="tab" aria-controls="nav-historic" aria-selected="false">Històric</a></nav> </div></body></html>
随时随地看视频慕课网APP
相关分类
Html5