JQueryでアクティブなボタンが機能しない

Question

私はナビゲーションバーを持っています。メニューボタンの1つをクリックしても、現在のボタンの色は変わりません。 Laravelでは完璧に動作し、フレームワークなしでこれを行うと、なぜ動作しないのかわかりません。誰でも助けてくれますか？ ナビゲーションバー：

<div class="collapse navbar-collapse activebtn" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav "> 
       <li><a href="index.php" >Comments<span class="sr-only">(current)</span></a></li> 
       <li><a href="profilepage.php">Profile</a></li> 
       <li><a href="allusers.php">Users</a></li> 
      </ul> 
</div> 

のjavascript：

var loc = window.location.pathname; 

$('.activebtn').find('a').each(function() { 
$(this).toggleClass('active', $(this).attr('href') == loc); 
}); 

CSS：

あなたはそれが click()機能を指し掲載JavaScriptで何もない

.navbar-default .activebtn a.active { 
padding: 0 21px; 
line-height: 33px; 
color: #56c93d; 
background: #323637; 
border-left: 0; 
border-right: 0; 
border-bottom: 3px solid #56c93d; 
background-image: -webkit-linear-gradient(top, #484e4f, #323637); 
background-image: -moz-linear-gradient(top, #484e4f, #323637); 
background-image: -o-linear-gradient(top, #484e4f, #323637); 
background-image: linear-gradient(to bottom, #484e4f, #323637); 
-webkit-box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2); 
box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2); 
} 
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus { 
border-bottom-color: #56c93d; 
} 

Answer 1

書かれたとしてあなたのコードほとんど作品 - このスクリプトが実行される時間によってDOMの準備ができていると仮定して - しかしwindow.location.pathnameは先頭に「/」に含まれていないが付属していますあなたのアンカーは上書きされるので、文字列は決して一致しません。

// var loc = window.location.pathname; 
 
// Setting a fake location for demo: 
 
var loc = "/profilepage.php"; 
 

 
$('.exampleone').find('a').each(function() { 
 
    $(this).toggleClass('active', $(this).attr('href') === loc); 
 
});

a {color: #000} 
 
.active {color: #F00}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="exampleone"> 
 
    <!-- changed the hrefs here --> 
 
    <ul> 
 
    <li><a href="/index.php">Comments<span class="sr-only">(current)</span></a></li> 
 
    <li><a href="/profilepage.php">Profile</a></li> 
 
    <li><a href="/allusers.php">Users</a></li> 
 
    </ul> 
 
</div>

Answer 2

。すべてのa要素を通過し、トグル関数をバインドします。これは何もしません。このようclickでeachを交換してみてください：

var loc = window.location.pathname; 

$('.activebtn').find('a').click(function() { 
    $(this).toggleClass('active'); 
    $(this).attr('href', loc); 
}); 

それは私達があなたのコードを見ることができますので、フィドルやコードのペンを作成してください解決しない場合。

マイフィドルhere