Javascript中怎么實(shí)現(xiàn)一個(gè)高亮菜單效果

Javascript中怎么實(shí)現(xiàn)一個(gè)高亮菜單效果，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

【結(jié)構(gòu)層】

一級(jí)菜單結(jié)構(gòu)層：

<ul id="menu">   <li><a href="default.html">首頁(yè)a>li>                    <li><a href="clothing.html">服裝用品a>li>   <li><a href="house.html">家居用品a>li>                <li><a href="cosmetic.html">化妝用品a>li>      ul>

可以看到在這個(gè)一級(jí)菜單中，其鏈接地址一般是沒(méi)有參數(shù)值的。 二級(jí)菜單的結(jié)構(gòu)層：

/*一級(jí)菜單的三種樣式設(shè)置*/ #menu li a.normal{background:#fff;}//普通樣式  #menu li a.over{background:#00ff00;} //翻滾樣式  #menu li a.cur{background:#ff0000;color:#fff;} //高亮樣式  /*二級(jí)菜單的三種樣式設(shè)置*/ #othermenu li a.normal{background:#fff;} //普通樣式  #othermenu li a.over{background:#AA7F00;color:#fff;} //翻滾樣式  #othermenu li a.cur{background:#7F0000;color:#fff;} //高亮樣式

與一級(jí)菜單不同的是，我們將二級(jí)菜單中的鏈接地址加入兩個(gè)參數(shù)值，pId參數(shù)指向的是頂部一級(jí)菜單的的序號(hào)，而sId則是菜單自己的順序號(hào)。我們將這兩個(gè)菜單的總?cè)萜鱱l都設(shè)置了兩個(gè)不同中的ID，它們需要在JS中調(diào)用，所以千萬(wàn)不能少。

【樣式層】

關(guān)于樣式，其實(shí)都沒(méi)有什么特別的地方，你可以隨心所意地設(shè)置成你想要的樣式，只是需要注意的地方是，我們需要單獨(dú)設(shè)置高亮Javascript菜單效果的三種狀態(tài)樣式，以供JS動(dòng)態(tài)調(diào)用。

/*一級(jí)菜單的三種樣式設(shè)置*/ #menu li a.normal{background:#fff;}//普通樣式  #menu li a.over{background:#00ff00;} //翻滾樣式  #menu li a.cur{background:#ff0000;color:#fff;} //高亮樣式  /*二級(jí)菜單的三種樣式設(shè)置*/ #othermenu li a.normal{background:#fff;} //普通樣式  #othermenu li a.over{background:#AA7F00;color:#fff;} //翻滾樣式  #othermenu li a.cur{background:#7F0000;color:#fff;} //高亮樣式

【行為層】

因?yàn)橐谛袨閷又锌刂撇藛蔚娜N狀態(tài)，所以對(duì)于A鏈接標(biāo)簽，我們就不使用hover偽類(lèi)來(lái)達(dá)到菜單的三種動(dòng)態(tài)行為了，我們可以用onmouseover、onmouseout和onclick來(lái)模仿偽類(lèi)的三種行為，這樣好便于js的動(dòng)態(tài)調(diào)整。并且為了達(dá)到行為、樣式和結(jié)構(gòu)的三層分離，我們也不用在A標(biāo)簽的html中去加上動(dòng)態(tài)的行為控制代碼，這不是一種良好的制作習(xí)慣。因此我們需要在頁(yè)面的加載函數(shù)上做點(diǎn)文章，這就需要使用到onload函數(shù)，當(dāng)頁(yè)面一加載完后就動(dòng)態(tài)綁定a標(biāo)簽的三種行為狀態(tài)。

在頁(yè)面一加載完成后，我們首先獲取當(dāng)前的頁(yè)面url字符串，再根據(jù)這個(gè)字符串和一二級(jí)菜單中的A標(biāo)簽的href地址進(jìn)行對(duì)比，如果存在相同項(xiàng)，則高亮此菜單項(xiàng)的樣式。

詳細(xì)的注釋說(shuō)明我都在下面的函數(shù)中一一標(biāo)注出來(lái)，在此就不一一細(xì)述了。關(guān)鍵函數(shù)代碼如下

//根據(jù)URL地址的參數(shù)或字符串高亮當(dāng)前菜單。  function hightLightMenu(firstMenuID,twoMenuID){      var strUrl,strHref,subNavs,strLast,strParentID,strSelfID,parentID,selfID,strID;              var Navs=document.getElementById(firstMenuID).getElementsByTagName("a");                         // 如果鏈接沒(méi)有參數(shù)，或者URL鏈接中不存在我們要獲取的參數(shù)，則返回?cái)?shù)組中的序號(hào)      if(location.href.indexOf("?")==-1){      strUrl=location.href.substring(location.href.lastIndexOf("/")+1);//取得URL頁(yè)面名稱(chēng)                 //一級(jí)菜單高亮                         for (var i = 0; i < Navs.length; i++) {                      //在IE6,IE7中strHref獲得的是全路徑，而在IE8和ff中獲得的是頁(yè)面名稱(chēng)，為了兼容，需要將它的字符串進(jìn)行拆分             strHref=Navs[i].getAttribute("href").substring(Navs[i].getAttribute("href").lastIndexOf('/')+1);                            if(strUrl==strHref){                //高亮當(dāng)前菜單項(xiàng)                                  addClass(Navs[i],"cur");                     }             else{//如果是其它項(xiàng)，則綁定鼠標(biāo)兩態(tài)事件                                       (function(i){                    var obj=Navs[i];                               addEventHandler(obj,"mouseover",function(){overMe(obj)});                    addEventHandler(obj,"mouseout",function(){outme(obj)});                })(i)                                    }                          }               //二級(jí)菜單高亮         if (document.getElementById(twoMenuID) != null) {//判斷是否存在二級(jí)菜單                //有可能二級(jí)菜單不存在，如首頁(yè)只有一級(jí)菜單，所以當(dāng)菜單id存在時(shí)，則                      subNavs = document.getElementById("othermenu").getElementsByTagName('a');             for (var n = 0; n < subNavs.length; n++) {               hightlight(subNavs,n,0);//默認(rèn)高亮***個(gè)菜單項(xiàng)                           }         }      }      else{         //如果url中帶有參數(shù)的頁(yè)面，則                 strLast = location.href.substring(location.href.indexOf("?")+1);            strParentID=strLast.substring(0,strLast.indexOf("&"));         strSelfID=strLast.substring(strLast.indexOf("&")+1);          parentID=strParentID.substring(strParentID.indexOf("=")+1);//獲得***個(gè)參數(shù)，這是一級(jí)菜單的id         selfID=strSelfID.substring(strSelfID.indexOf("=")+1);//獲得第二個(gè)參數(shù)，這是二級(jí)菜單的id            //一級(jí)菜單高亮           for (var i = 0; i < Navs.length; i++) {             hightlight(Navs,i,parentID);                                                                   }         //二級(jí)菜單高亮         if (document.getElementById(twoMenuID) != null) {//判斷是否存在二級(jí)菜單                       subNavs = document.getElementById(twoMenuID).getElementsByTagName('a');             for (var n = 0; n < subNavs.length; n++) {                strID=selfID - 1;                          hightlight(subNavs,n,strID);                           }        }      }        }  //高亮函數(shù)  function hightlight(elementArray,inumber,curMenuIndex){      if (inumber == curMenuIndex) {              addClass(elementArray[inumber],"cur");//高亮當(dāng)前菜單樣式      }      else {         (function(inumber){             var obj = elementArray[inumber];             addEventHandler(obj, "mouseover", function(){overMe(obj)});//增加鼠標(biāo)移上去時(shí)的事件             addEventHandler(obj, "mouseout", function(){outme(obj)});//增加鼠標(biāo)移走時(shí)的事件         })(inumber)      }     }

經(jīng)過(guò)如上一番設(shè)置，一個(gè)通用、兼容的高亮函數(shù)就誕生了，我們看看高亮Javascript菜單效果截圖：

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。