如何更改此活动导航标签的颜色？

debugcn 发表于 Dev

安息日

我正在尝试在活动时更改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;
}

谢谢你的帮助。

亲切的问候，Miquel

库玛·高拉夫（Kumar Gaurav）

此代码将解决您的问题。

.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 lang="en">
<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" align="center">
<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。