onclick jquery添加/刪除類功能不工作

我使用單個導航文件的所有網頁，所以我需要添加或刪除基於點擊功能的類。但不知何故，它不能正常工作。任何幫助，將不勝感激。onclick jquery添加/刪除類功能不工作

$(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>

來源

2017-10-05 Upendra Joshi

當頁面瀏覽到其他頁面，然後如何從舊的頁面管理活動狀態。爲此，您必須根據您可以管理哪些li需要激活的url來更改代碼 –

。這只是解決方案 –

如果您使用PHP（從代碼中的窗口位置attr），最好在處理該類時處理該頁面，而不是稍後通過javascript – mrid

您可以使用在每一頁下面的腳本來設置此。

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>

來源

2017-10-05 09:28:14

來處理它，謝謝！這工作完美！你剛剛救了我！ –

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

JSFiddle

來源

2018-01-31 12:27:31

onclick jquery添加/刪除類功能不工作

回答

相關問題