のonclick jqueryのクラスの関数は、私はすべてのウェブページのための単一のナビゲーション・ファイルを使用していますので、私はクリック機能に基づいてクラスを追加または削除する必要が

Question

を働いていない追加/削除。何とかそれはうまく動作していない。どんな助けもありがとう。あなたがこれを設定するには、すべてのページに次のスクリプトを使用することができます

$(function() { 
 
    $("li").on("click", function() { 
 
    $("li.active").removeClass("active"); 
 
    $(this).addClass("active"); 
 
    }); 
 
});

<div class="nav-side-menu"> 
 
    <div class="brand">Brand Logo</div> 
 
    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> 
 
    <div class="menu-list"> 
 
    <ul id="menu-content" class="menu-content collapse out"> 
 
     <li style="cursor: pointer;" onclick="window.location='new-patient.php';"> 
 
     <a><i class="fa fa-plus-square"></i>New Patient</a> 
 
     </li> 
 
     <li style="cursor: pointer;" onclick="window.location='returning-patient.php';"> 
 
     <a><i class="fa fa-plus-square"></i>Returning Patient</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

。

var pageName = (function() { 
 
    var a = window.location.href, 
 
    b = a.lastIndexOf("/"); 
 
    return a.substr(b + 1); 
 
}()); 
 

 
$("#menu-content a").each(function() { 
 
    if ($(this).attr('href') == pageName) { 
 
    $(this).parents("li").addClass('active'); 
 
    } 
 
}) \t

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="nav-side-menu"> 
 
\t <div class="brand">Brand Logo</div> 
 
\t <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> 
 
\t <div class="menu-list"> 
 
\t \t <ul id="menu-content" class="menu-content collapse out"> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="new-patient.php"> 
 
\t \t \t \t \t <i class="fa fa-plus-square"></i>New Patient 
 
\t \t \t \t </a> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a href="returning-patient.php"> 
 
\t \t \t \t \t <i class="fa fa-plus-square"></i>Returning Patient 
 
\t \t \t \t </a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </div> 
 
</div>

Answer 2

$('#menu li a').on('click', function(){ 
    $('#menu li a.current').removeClass('current'); 
    $(this).addClass('current'); 
}); 

JSFiddle