我正在嘗試在 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 回答
神不在的星期二
TA貢獻1963條經驗 獲得超6個贊
這段代碼將解決您的問題。
.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>
- 1 回答
- 0 關注
- 107 瀏覽
添加回答
舉報
0/150
提交
取消