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

时间：2010-12-11 来源：andyran

一个页面, 左边为菜单栏, 右边为一个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了. 嗨, 郁闷.

相关阅读更多 +