Как я могу изменить цвет этой активной вкладки? - PullRequest
Новая
       0

Как я могу изменить цвет этой активной вкладки?

0 голосов
/ 14 марта 2020

Я пытаюсь изменить цвет в 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 Ответ

1 голос
/ 14 марта 2020

Этот код решит вашу проблему. 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...