首页 > 代码库 > 信息化系统导航菜单样式实现
信息化系统导航菜单样式实现
选中的是绿色的菜单,其余为灰色的。
实现方法:具体菜单使用图片代替,不采用文字和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;
}
})