今天工作的时候遇到这个问题了，找了一些资料，也参考了其他项目的代码，最后确定的下面的解决方法。
1.想要的效果是：点击后整行变亮，鼠标放在其他的菜单上，其他菜单加亮，移开鼠标，其他菜单变暗。但是被点击的菜单始终保持加亮样式。
难点：页面中onclick和onmouseover与onmouseout冲突，
处理方法：在js中通过id判断，被选中的始终保持加亮，。只有不被选中的菜单才执行onmouseover与onmouseout。此方法难点在于怎么传入被点击菜单的id，暂时没有找到什么方法，然后我用class代替，被点击的菜单，class=“menu_hover”；然后调用onmouseover与onmouseout时先获取一下class，判断一下，然后在执行。
代码：
<js>
function linkHover(a,id, flag,classname){
if(a==1){
//鼠标移出-待分配事项
if (flag == 0) {
if (classname !='leftmenu_hover') {
document.getElementById(id).style.background="none";
document.getElementById('font_distribute').style.color="black";
document.getElementById('img_distribute').src='res/img/distribute1.png';
}
}
else {//鼠标移入
document.getElementById(id).style.background="url(res/img/menu_org1.png) no-repeat center";
document.getElementById('font_distribute').style.color="white";
document.getElementById('img_distribute').src='res/img/distribute2.png';
}
}
else if(a==2){
//鼠标移出-待预受理
if (flag == 0) {
if (classname !='leftmenu_hover') {
document.getElementById(id).style.background="none";
document.getElementById('font_advanceAccept').style.color="black";
document.getElementById('img_advanceAccept').src='res/img/advanceAccept1.png';
}
}
else {//鼠标移入
document.getElementById(id).style.background="url(res/img/menu_org1.png) no-repeat center";
document.getElementById('font_advanceAccept').style.color="white";
document.getElementById('img_advanceAccept').src='res/img/advanceAccept2.png';
}
}
}
function distributeMatter(){//分派
//修改class类型，用于区分是否点击状态
document.getElementById('menu_distribute').className = "leftmenu_hover";
}
<html>
<li id="menu_distribute" class="leftmenu_hover" style="border-bottom:3px solid #f0f0f0;margin-top:10px;background:url(res/img/menu_org1.png) no-repeat center;"
οnclick="distributeMatter()" οnmοuseοver="linkHover('1',this.id, '1',this.className);" οnmοuseοut="linkHover('1',this.id, '0',this.className);" >
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
