如何设置活动jQuery菜单项

我对

jQuery

相当陌生。我很感激任何指示。当用户单击不同的菜单项时，我试图将

jQuery

菜单项设置为

active

。我有一个包含

li

菜单项的

ul

列表。第一次加载时，我将

#menuitem1

设置为单击以最初选择它。例如，如果用户然后单击

#menuitem3

，则存在检查某项内容的条件，如果不满足该条件，我需要初始菜单项

#menuitem1

，以保留为活动菜单项

菜单

ul>li

如下所示：

<ul id="adminMenu">
    <li class="ui-widget-header">Application Settings</li>
    <li id="menuitem1" onclick="loadAppSettings();">Settings</li>
    <li id="menuitem2" onclick="LoadView('wLibs', 'Libraries', this);">Libraries</li>
    <li id="menuitem3" onclick="LoadView('wDocs', 'Document', this);">Documents</li>
</ul>
var previousmenuitem = "menuitem1"

//initializes with
$("#" + previousmenuitem).click()

function LoadView(a, b, liObj){

    if(condition_not_met){ // if condition is not met, I need to set the previous active menu item back to active
        //remove active class from what was clicked
        $(liObj).removeClass("active")
        //set active menu li to previousmenuitem
        $("#" + previousmenuitem).addClass("active")
    }
}

---

您可以这样做，只需使用$（this）

这是一个简单的演示

$（“#adminMenu li”）。在（'click'，function（）上{
$（.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
});
.active{
背景色：红色；
}


应用程序设置
设置
库
文件
试试这个：

<ul id="adminMenu">
    <li class="ui-widget-header" onclick="setActive( this, functionTrue() );">Application Settings</li>
    <li class="active" onclick="setActive(this, functionFalse() );">Settings</li>
    <li onclick="setActive( this, functionTrue() );">Libraries</li>
    <li onclick="setActive( this, functionTrue() );">Documents</li>
</ul>

<script type="text/javascript">

var functionTrue = function() { return true }
var functionFalse = function() { return false }

var setActive = function( el, functionResult ) {
    if ( ! functionResult ) return false;
    $( el ).parent().find( "li.active" ).removeClass( 'active' );
    $( el ).addClass( 'active' );
};

</script>


应用程序设置
设置
库
文档

var functionTrue=function（）{return true}
var functionFalse=function（）{return false}
var setActive=函数（el，函数结果）{
如果（！functionResult）返回false；
$（el）.parent（）.find（“li.active”）.removeClass（'active'）；
$（el）.addClass（'active'）；
};

函数false模拟
loadAppSettings（）的
return false
函数

这是小提琴：

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

<ul id="adminMenu">
    <li class="ui-widget-header" onclick="setActive( this, functionTrue() );">Application Settings</li>
    <li class="active" onclick="setActive(this, functionFalse() );">Settings</li>
    <li onclick="setActive( this, functionTrue() );">Libraries</li>
    <li onclick="setActive( this, functionTrue() );">Documents</li>
</ul>

<script type="text/javascript">

var functionTrue = function() { return true }
var functionFalse = function() { return false }

var setActive = function( el, functionResult ) {
    if ( ! functionResult ) return false;
    $( el ).parent().find( "li.active" ).removeClass( 'active' );
    $( el ).addClass( 'active' );
};

</script>