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

??

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

实现方法：详细菜单使用图片取代。不採用文字和css组合实现。

主要JS代码：

点击菜单的时候。先遍历移除已有的选中菜单样式，然后再加入新的菜单相应样式

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

?document.getElementById(id).src=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=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=imgPath;
??? ?}
??? })