有點(diǎn)小問(wèn)題，問(wèn)題在代碼注釋里！勞煩了！
<!doctype?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>菜單</title>
??<style?type="text/css">
body,ul,li{?margin:0;?padding:0;?font-size:13px;}
ul,li{list-style:none;}
#divselect{width:186px;?margin:80px?auto;?position:relative;?z-index:10000;}
#divselect?cite{width:150px;?height:24px;line-height:24px;?display:block;?color:#807a62;?cursor:pointer;font-style:normal;
padding-left:4px;?padding-right:30px;?border:1px?solid?#333333;?
background:url(xjt.png)?no-repeat?right?center;}
#divselect?ul{width:184px;border:1px?solid?#333333;?background-color:#ffffff;?position:absolute;?z-index:20000;?margin-top:-1px;?display:none;}
#divselect?ul?li{height:24px;?line-height:24px;}
#divselect?ul?li?a{display:block;?height:24px;?color:#333333;?text-decoration:none;?padding-left:10px;?padding-right:10px;}
??</style>
???<script?type="text/javascript">
window.onload=function(){
??var?box=document.getElementById('divselect'),
??????title=box.getElementsByTagName('cite')[0],
??????menu=box.getElementsByTagName('ul')[0],
??????as=box.getElementsByTagName('a'),
????????index=-1;
???
????//?點(diǎn)擊三角時(shí)
????title.onclick=function(event){
??????//?執(zhí)行腳本
??????event=event||window.event;
??????if?(event.stopPropagation)?{
????????event.stopPropagation();
??????}?else{
????????event.cancelBubble=true;
??????};
??????menu.style.display='block';
??????document.onkeyup=function(e){
??????????e=e||window.event;
??????????for(var?i=0,l=as.length;i<l;i++){
??????????????as[i].style.background='none';
??????????}
??????????//下方向鍵
??????????if(e.keyCode==40){
??????????????index++;
??????????????if(index>=as.length){
??????????????????index=0;
??????????????}
??????????????as[index].style.background='#ccc';
??????????}
??????????//上方向鍵
??????????if(e.keyCode==38){
??????????????if(index<=0){
??????????????????index=as.length;
??????????????}
??????????????index--;
??????????????as[index].style.background='#ccc';
??????????}
??????????//回車鍵
??????????if?(e.keyCode==13)?{
????????????title.innerHTML=as[index].innerHTML;
????????????menu.style.display='none';
??????????};
??????????//?老師原本代碼如下：
??????????//?if(e.keyCode==13?&&?index!=-1){
??????????//???title.innerHTML=as[index].innerHTML;
??????????//???for(var?i=0;i<as.length;i++){
??????????//?????as[i].style.background='none';
??????????//???}
??????????//???menu.style.display='none';
??????????//???index=-1;????
??????????//?}
??????????//?為什么要判斷?index!=-1？
??????????//?這里添加for循環(huán)是什么含義呢？
??????????//?為什么要初始化index，是為了下次使用鍵盤事件的時(shí)候又從第一個(gè)開始遍歷嗎？如果我不從第一個(gè)開始呢？
??????}
????}?
????
???//?滑過(guò)滑過(guò)、離開、點(diǎn)擊每個(gè)選項(xiàng)時(shí)
??????//?執(zhí)行腳本
??????for(var?i=0;i<as.length;i++){
????????as[i].onmouseover=function(){
??????????this.style.background='#ccc';??????????//這里的this換成a[i]為什么會(huì)報(bào)錯(cuò)呢？
????????}
????????as[i].onmouseout=function(){
??????????this.style.background='none';??????????//這里的this換成a[i]為什么會(huì)報(bào)錯(cuò)呢？
????????}
????????as[i].onclick=function(){
??????????title.innerHTML=this.innerHTML;?????????//這里的this換成a[i]為什么會(huì)報(bào)錯(cuò)呢？
????????}
??????}
???//?點(diǎn)擊頁(yè)面空白處時(shí)
???????//?執(zhí)行腳本
???????document.onclick=function(){
????????menu.style.display='none';
???????}
?}
???</script>
</head>
<body>
??<div?id="divselect">
??????<cite>請(qǐng)選擇分類</cite>
??????<ul>
?????????<li?id="li"><a?href="javascript:;"?selectid="1">ASP開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="2">.NET開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="3">PHP開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="4">Javascript開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="5">Java特效</a></li>
??????</ul>
????</div>
</body>
</html>整個(gè)代碼可以執(zhí)行，需要調(diào)試的話直接復(fù)制就好！老煩了
2015-11-06
為什么要判斷?index!=-1？ 因?yàn)槿绻慌袛嘣摋l件as[-1].innerHTML不存在會(huì)報(bào)錯(cuò)
這里添加for循環(huán)是什么含義呢？ 取消掉每一個(gè)<a>標(biāo)簽的背景色，還原成初始狀態(tài)，使下一次打開選項(xiàng)時(shí)，沒(méi)有選項(xiàng)的背景色是灰色的。
為什么要初始化index，是為了下次使用鍵盤事件的時(shí)候又從第一個(gè)開始遍歷嗎？如果我不從第一個(gè)開始呢？ 道理同上，還原初始狀態(tài)，使下一次打開選項(xiàng)時(shí)index為-1。如果不還原為-1，假設(shè)最后index值為3，那么下次打開選項(xiàng)時(shí)，你按down鍵，就不是第一個(gè)選項(xiàng)背景色變成灰色，而是第五個(gè)選項(xiàng)背景色變成灰色。
這里的this換成a[i]為什么會(huì)報(bào)錯(cuò)呢？ 因?yàn)轫?yè)面加載完成之后，i的值為as.length，而as[as.length]是不存在的，所以無(wú)法是它的背景色變成灰色，所以會(huì)報(bào)錯(cuò)。而使用this，this是代表你鼠標(biāo)滑過(guò)的那個(gè)元素，所以不存在這種情況。
2015-10-22
或許代碼截圖會(huì)更便利閱讀，我粘貼的時(shí)候忘了選擇Javascript語(yǔ)言了！