通过jquery选择li菜单实现无刷新css效果

需求:

一个页面, 左边为菜单栏, 右边为一个iframe,通过点击左边的菜单,iframe载入对应的页面.同时对选中的菜单添加css选择效果

 

代码

     < div  id ="leftmenu"  class ="menu" >
         < ul  style ="overflow: visible;"  id ="menu_index" >
          < li >< a  target ="main"  hidefocus ="true"  href ="main.html"  class ="selected" > 管理中心首页 </ a ></ li >
          < li >< a  target ="main"  hidefocus ="true"  href ="list.html"  class ="" > 列表显示 </ a ></ li >
          < li >< a  target ="main"  hidefocus ="true"  href =""  class ="" > 商品管理 </ a ></ li >
          < li >< a  target ="main"  hidefocus ="true"  href =""  class ="" > 公告管理 </ a ></ li >
         </ ul >
        < ul  style ="display:none"  id ="menu_global" >
          < li >< a  target ="main"  hidefocus ="true"  href ="form1.html" > 表单控件1 </ a ></ li >
          < li >< a  target ="main"  hidefocus ="true"  href ="form1.html" > 表单控件2 </ a ></ li >
       </ ul >
     </ div >

 

 

选中管理中心首页后对a标价添加名为selected的css, 选中其他项则为该项添加该css, 同时移除其他菜单的selected css, 本来可以通过对li或者a添加id来实现, 然后对a添加click事件很简单就可以实现, 但是如果是菜单不固定, 或者菜单太多相对来说就会比较麻烦.但是要是硬是这样实现, 由于很久没接触jquery了, 所以可能是我跟不上时代了,呵呵,搞了半天, 以下为实现代码, 在载入时绑定.

 

    $( function (){
        $( ' #leftmenu a ' ).click( function (){
            $( ' #leftmenu a ' ).each( function () {
                $( this ).removeClass( ' tabon ' );
            });
            $( this ).addClass( ' tabon ' );
        });
    })

 

 

我纠结在了第一句, 每次都想each, 结果把我each进去了, 然后发现可以直接对$('#leftmenu a') click(囧), 遍历删除目前的css, 然后对click项添加css就OK了. 嗨, 郁闷.