2017-10-15 21 views
0

navbarページでアクティブなクラスを切り替える方法のための解決策がたくさんありましたが、navbarブランドリンクを設定するときホームページに移動する方法、およびその場合はホームリンクをアクティブに設定する方法、アクティブなホームリンクを無効にする方法があります。問題を再作成するために、ここでもブランドがクリックされたときにブートストラップnavbarがアクティブなページを設定しない

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".nav a").on("click", function(){ 
      $(".nav").find(".active").removeClass("active"); 
      $(this).parent().addClass("active"); 
     }); 
    }); 
</script> 

enter image description here

:ここ

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header row"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse"> 
        <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="#!/">KitchBlocks</a> 
      </div> 
      <div class="collapse navbar-collapse navbarCollapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"> 
         <a href="#!/">Home</a> 
        </li> 
        <li> 
         <a href="#!/purchase">Purchase</a> 
        </li> 
        <li> 
         <a href="#!/download">Download</a> 
        </li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li> 
         <a href="http://www.kiche.com/" style="padding:0"><img src="images/a.png" height="32" style="margin-top:1px" ></a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

jqueryのコードです:ここではナビゲーションバーがありますデフォルトでは、メインページに移動し、「ホーム」は、有効です。 「ダウンロード」に移動すると、それがアクティブになります。 "自宅"にリダイレクトするブランドリンクをクリックしますが、 "ダウンロード"はまだアクティブです。とにかくそれを修正するには?

答えて

2

あなたの例を単純に変更したものです。働くフィドルはHere

$(document).ready(function() { 
    $(".nav a").on("click", function(){ 
     $(".nav").find(".active").removeClass("active"); 
     $(this).parent().addClass("active"); 
    }); 
    $(".navbar-brand").on("click", function(){ 
     $(".nav").find(".active").removeClass("active"); 
     $('.nav a[href="#!/"]').parent().addClass("active"); 
    }); 
}); 
です
関連する問題