<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<title>下拉菜單</title>
????<script?src='JS/event.js'></script>
<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">
???var?index=-1,
???????flag=1;
???????function?clearA(){
??????????var?box=document.getElementById('divselect');
??????????var?as=box.getElementsByTagName('a');
??????????for(var?i=0,l=as.length;i<l;i++){
????????????as[i].style.background='#fff';
??????????}
???????}
window.onload=function(){
var?box=document.getElementById('divselect'),
????title=box.getElementsByTagName('cite')[0],
????menu=box.getElementsByTagName('ul')[0],
????as=box.getElementsByTagName('a');
???
????//?點(diǎn)擊三角時(shí)
????title.onclick=function(event){
??????//?執(zhí)行腳本
??????event?=?event?||?window.event;
??????if(flag==1){
??????menu.style.display='block';
??????flag=0;
????}else?if(flag==0){
??????menu.style.display='none';
??????flag=1;
??????index=-1;
????}
??????eventUtil.stopPropagation(event);
?????
????}??
????
???//?滑過滑過、離開、點(diǎn)擊每個(gè)選項(xiàng)時(shí)
??????//?執(zhí)行腳本
??????for(var?i=0,l=as.length;i<l;i++){
????????as[i].onmouseover=function(){
??????????clearA();
??????????this.style.background='#A6A6A6';
??????????
??????????
??????????index=parseInt(this.selectid)-1;
??????????//我想在鼠標(biāo)劃入的時(shí)候,懸停在哪個(gè)a標(biāo)簽就讓index=this.selectid-1
??????????//但是結(jié)果index沒有正確賦值,然后我想是不是this.selectid不是數(shù)字我用
??????????//parseInt(this.selectid),最后index=parseInt(this.selectid)-1了,但是還是不能正確的
??????????//當(dāng)鼠標(biāo)移入a標(biāo)簽時(shí),把index的值改成相對(duì)應(yīng)的數(shù).
??????????
??????????
????????}
????????as[i].onmouseout=function(){
??????????this.style.background='#fff';
??????????index=-1;
????????}
????????as[i].onclick=function(event){
??????????event?=?event?||?window.event;
??????????title.innerHTML=this.innerHTML;
??????????menu.style.display='none';
??????????flag=1;
??????????index=-1;
??????????eventUtil.stopPropagation(event);
????????}
??????}
???//?點(diǎn)擊頁面空白處時(shí)
???????//?執(zhí)行腳本
???????document.onclick=function(){
????????menu.style.display='none';
????????flag=1;
????????index=-1;
???????}
???????document.onkeyup=function(event){
???????event?=?event?||?window.event;
????????if(event.keyCode==40){
????????????menu.style.display='block';
????????????flag=0;
????????????if(index<as.length-1){
?????????????index++;
????????????}
????????????else{
??????????????index=0
????????????}
????????????clearA();
????????????as[index].style.background='#A6A6A6';
???????
????????}
????????else?if(event.keyCode==38){
????????????menu.style.display='block';
????????????flag=0;
????????????if(index<=0){
??????????????index=as.length-1;
????????????}
????????????else{
??????????????index--;
????????????}
????????????clearA();
????????????as[index].style.background='#A6A6A6';
????????}
????????else?if(event.keyCode==13&&flag==0){
????????????clearA();
????????????menu.style.display='none';
????????????title.innerHTML=as[index].innerHTML;
????????????flag=1;
????????????index=-1;
????????}
????????eventUtil.preventDefault(event);
???????}
?}
???</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>上面這些代碼中as[i].onmouseover那里我添加了幾行備注,描述我想問的.最后再簡(jiǎn)單講一下我想要打到的代碼效果:當(dāng)鼠標(biāo)移入a標(biāo)簽,獲取這是第n個(gè)a標(biāo)簽,然后將n-1賦值給index.例:鼠標(biāo)懸停在PHP開發(fā),得到是第3個(gè)a標(biāo)簽.那么index=3-1;
DOM事件探秘最后的編程練習(xí)求指導(dǎo)~
小三是籃球
2016-08-03 21:03:40