Question

我对jQuery很新。我很感激任何方向。当用户点击其他菜单项时，我尝试将jQuery菜单项设置为active。我有一个ul列表，其中包含li个菜单项。首次加载时，我将#menuitem1设置为单击以最初选择它。例如，如果用户点击#menuitem3，则有条件检查某些内容，如果条件不满足，我需要初始菜单项#menuitem1作为活动菜单项。< / p>

菜单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")
    }
}

我尝试使用li代替ui-state-active添加/删除active课程，或尝试删除所有active的{{1}}，依此类推。

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

li $('#adminMenu li.active').removeClass('active');

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>

Answer 2

试试这个：

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

functionFalse模拟return false函数的loadAppSettings();。

这里的小提琴：http://jsfiddle.net/8h9sqmrs/

如何设置活动的jQuery菜单li项

2 个答案: