首页 > 代码库 > 信息化系统导航菜单样式实现

信息化系统导航菜单样式实现

实现的菜单效果:


选中的是绿色的菜单,其余为灰色的。

实现方法:具体菜单使用图片代替,不采用文字和css组合实现。

主要JS代码:

点击菜单的时候,先遍历移除已有的选中菜单样式,然后再添加新的菜单对应样式

 changeC(id,img);
 var index=img.indexOf(".");
 var imgPath=‘<%=basePath %>images/menu/‘+img.substring(0,index)+‘w.png‘;

 document.getElementById(id).src=http://www.mamicode.com/imgPath;

遍历移除已有菜单样式

    function changeC(id,img){
     for(var i=0;i<jQuery("img").length;i++){     
      if(id!=jQuery("img")[i].id){
          var path=jQuery("img")[i].src;
          if(path.indexOf("w")>0){
                  var index=path.indexOf("w");
                   path=path.substring(0,index)+".png";
                   document.getElementById(jQuery("img")[i].id).src=http://www.mamicode.com/path;
          }
       }
      }
    }

登陆后默认选中第一项菜单

    $(document).ready(function(){
     if($(‘.topmenu‘).size()>0){
       var id=$(‘.topmenu‘)[0].id;
       var img=$(‘.topmenu‘)[0].src;
       var index=img.indexOf(".");
        var imgPath=img.substring(0,index)+‘w.png‘;
          document.getElementById(id).src=http://www.mamicode.com/imgPath;
     }
    })