web-dev-qa-db-ja.com

Bootstrap 4 navbar active class

私はプロジェクトとしてWebプログラミングを学び始め、ナビゲーションバーでリンクをアクティブに表示するのに苦労しました。私は過去に尋ねられた同様の質問を探すことから始めましたが、どの回答も私の問題を解決するようには見えませんでした。

これが私のコードです

<div>
<hr>
    <nav class="container-fluid navbar navbar-expand-sm bg-dark navbar-dark" style="padding-left: 75px; margin-top: -16px;">
        <ul class="navbar-nav">
            <li class="active nav-item">
                <a class="nav-link active" style = "padding-left: 0px; color: white;" href="#">Most Popular</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">News</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">Sports</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">Science</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">Politics</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">Economics</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" style="color: white">Random</a> 
            </li>
            <li class="nav-item">
                <a class="nav-link " style="padding-left: 480px; color: white; " href="#">Log in</a>
            </li>
        </ul>
    </nav>
</div>

見つけたこのJavaScriptを使ってみましたが、今のところ機能していません

$('.nav li').click(function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
})

うまくいけば、私が始めたばかりなので、私のコードはあまりファンキーではありません。何卒よろしくお願いいたします。

twitter-bootstrapnavbar
4
kirkosaur

複数の問題があります...

  1. セレクター$（ '。nav li'）は、マークアップ内で.navクラスを使用していないため、何もしません。 $（ '。navbar-nav .nav-link'）である必要があります。
  2. リンクにstyle="color:white"があり、activeクラスで行った変更を上書きします。
  3. アクティブクラスのCSSがありません。デフォルトでは、navbar-darkのBootstrapアクティブクラスは白になります。どの色を設定しようとしていますか？
  4. Liの代わりにnav-linkでアクティブに設定し、
.navbar-dark .nav-item > .nav-link.active  {
    color:white;
}

$('.navbar-nav .nav-link').click(function(){
    $('.navbar-nav .nav-link').removeClass('active');
    $(this).addClass('active');
})

デモ： https://www.codeply.com/go/I3EjDb74My

7
Zim
// active nav

// get current url
var location = window.location.href;

// remove active class from all
$(".navbar .nav-item").removeClass('active');

// add active class to div that matches active url
$(".nav-item a[href='"+location+"']").addClass('active');
1
user3748820