jquery - 如何设置事件的 jQuery 菜单项

Question

我是 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")
    }
}

我尝试使用 ui-state-active 而不是 active 添加/删除 li 类，或者尝试删除 active 所有 li $('#adminMenu li.active').removeClass('active'); 等等。

或者使用选择选项和焦点选项尝试捕捉选择或焦点，如果条件满足就退出，就像这样(我只是在这里有一个警报，但它甚至没有为我弹出警报)。

$( "#adminMenu" ).menu({
  items: "> :not(.ui-widget-header)"
  select: function(e, ui){
    alert("here")
    return false;
  }
});

Answer 1

你可以这样做，只需使用 $(this)

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

这是一个简单的演示

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

.active{
    background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="adminMenu">
    <li class="ui-widget-header">Application Settings</li>
    <li id="menuitem1" class="active">Settings</li>
    <li id="menuitem2">Libraries</li>
    <li id="menuitem3">Documents</li>
</ul>