摘要:1.想要的效果是:点击后整行变亮,鼠标放在其他的菜单上,其他菜单加亮,移开鼠标,其他菜单变暗。但是被点击的菜单始终保持加亮样式。 难点:页面中onclick和onmouseover与onmouseout冲突, 处理方法:在js中通过id判断,被选中的始终保持加亮,。只有不被选中的菜单才执行onmouseover与onmouseout。此方法难点在于怎么传入被点击菜单的id,
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);" >