onclick与onmouserover,onmouseout公用时的问题

原创 2016-11-08 09:51:08 370
摘要: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);" >


发布手记

热门词条