選択したページを表示するナビゲーションを取得する

Question

選択したページを表示するためにナビゲーションメニューを表示するのに苦労しています。私は自分のサイトを構築するためにBootstrapフレームワークを使用しています。これでしかし

<script> 
     $('label').click(function() { 
     $(this).parent('li').toggleClass('active'); 
     }); 
    </script> 

：

<nav class="navbar"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="/index.html">Digital Transformation</a> 
    </div> 
    <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav pull-right"> 
     <li class="active"><a href="/index.html">Transformation deck</a></li> 
     <li><a href="/backgroundInformation.html">Background information</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

私の知る限り

は、ブートストラップは、選択したメニュー項目をアクティブにするために、次のJSを使用して、私は私のヘッダーを持っている：これは私のナビゲーションメニューです私の主なナビアイテムはページロード時にアクティブですが、2番目のアイテムを選択すると、 '背景情報'の代わりに 'Tranformation deck'がアクティブとして保持されます。

ここでトリックがありませんか？どんな助けでも大歓迎です。

Answer 1

あなたのNAVの項目にクリックリスナーをフックアップしたい場合は、あなたのスクリプトは、このようなものでなければなりません：

<script> 
    $('#navbar nav li a').click(function() { 
    $(this).parent('li').toggleClass('active'); 
    }); 
</script> 

あなたはあなたのコード内の任意の「ラベル」のタグを持っているので、「そこにISNはありませんClickイベントハンドラを添付するもの

Answer 2

$(function() { 
 
     // this will get the full URL at the address bar 
 
     var url = window.location.href; 
 

 
     // passes on every "a" tag 
 
     $("#navbar a").each(function() { 
 
      // checks if its the same on the address bar 
 
      if (url == (this.href)) { 
 
       $(this).closest("li").addClass("active"); 
 
      } 
 
     }); 
 
    });