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>

当页面浏览到其他页面，然后如何从旧的页面管理活动状态。为此，您必须根据您可以管理哪些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>

来处理它，谢谢！这工作完美！你刚刚救了我！ –

答

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

JSFiddle

onclick jquery添加/删除类功能不工作

相关推荐