アクティブなナビゲーションバーのリンクを背景色に変更するにはどうすればよいですか？ブートストラップ4.

Question

私はこの質問が何度か尋ねられていることを認識していますが、解決策のどれも私のために働いていません。ここに私のHTMLは次のとおりです。

<div class="navbar-light" style="position: sticky; top: 0px; background: #fff0d8; z-index:99;"> <!--z-index to stay on top of everything else--> 
<div class="container"> 
<ul class="sc-nav nav navbar-nav nav-fill w-100 flex-md-row"> 
<li class="nav-item"> 
    <a class="nav-link" href="#">oihdma</a> 
</li> 
<li class="nav-item"> 
    <a class="nav-link" href="#">saaaassas</a> 
</li> 
<li class="nav-item"> 
    <a class="nav-link" href="#">fffffffffffff</a> 
</li> 
<li class="nav-item"> 
    <a class="nav-link" href="#">dsdsd</a> 
</li> 
<li class="nav-item"> 
    <a class="nav-link" href="#">fsfsfsfs</a> 
</li> 
<li class="nav-item"> 
    <a class="nav-link" href="#">fffff</a> 
</li> 
<li class="nav-item"> 
    <a class="nav-link" href="#">xxxxx</a> 
</li> 
</ul> 

そして、私のスクリプト：

$(document).ready(function() { 
    var url = this.location.pathname; 
    var filename = url.substring(url.lastIndexOf('/')+1); 
    $('a[href="' + filename + '"]').parent().addClass('active'); 
}); 

それはページのロード後に実行されるように、私はページのフッターにこのスクリプトを残しました。

最後に、私のCSS：

ul.nav a:hover, ul.nav a:focus, ul.nav a:active { background-color: #FDCBA3;} 

ホバーと意図したとおりに作業を集中しますが、アクティブではありません。スクリプトによってリンクがアクティブになり、テキストの色が変わり、正常に動作します。しかし、背景色は変化しません。ホバリング時とフォーカス時に変化しますが、クリックした場合は変化しません。

Answer 1

:active疑似クラスは、あなたのJavaScriptで設定している.activeクラスとは異なります。

は、以下のことを試してみてください。

ul.nav a:hover, ul.nav a:focus, ul.nav a.active { background-color: #FDCBA3;} 

Answer 2

私はFirefoxで能動素子を検査し、私が間違ってCSSを変えたことに気づきました。これはうまくいきました：

ul.nav a:hover, ul.nav a:focus, .active { background-color: #FDCBA3;}