css - How to set the active jQuery menu li item -

i'm pretty new jquery. i'm grateful direction. i'm trying set jquery menu item active when user clicks on different menu item. have ul list li menu items. when first loading, set #menuitem1 clicked select it. if user clicks #menuitem3 example, there condition check , if condition not met, need initial menu item, #menuitem1, remain active menu item.

menu ul>li looks this:

<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 $("#" + previousmenuitem).click()  function loadview(a, b, liobj){      if(condition_not_met){ // if condition not met, need set previous active menu item active         //remove active class clicked         $(liobj).removeclass("active")         //set active menu li previousmenuitem         $("#" + previousmenuitem).addclass("active")     } } 

i have tried adding/removing li class ui-state-active instead of active, or tried remove active li $('#adminmenu li.active').removeclass('active'); , on.

or select option , focus options trying catch select or focus , quit if condition met, (i have alert here, wasn't popping alert me).

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

you can have use $(this)

$("#adminmenu li").on('click',function(){ $(".active").removeclass("active"); $(this).addclass("active"); }); 

and simple demo

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