onclick与onmouserover,onmouseout公用时的问题
今天工作的时候遇到这个问题了,找了一些资料,也参考了其他项目的代码,最后确定的下面的解决方法。
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;"
onclick="distributeMatter()" onmouseover="linkHover('1',this.id, '1',this.className);" onmouseout="linkHover('1',this.id, '0',this.className);" >