<!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){
?????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;i<as.length;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?&&?index!=-1){
????????if(menu.style.display='block'){
????????title.innerHTML?=?as[index].innerHTML;
????????menu.style.display='none';
????????}
????????}
????????}
?????}
?????
?????for(var?i=0;i<as.length;i++){
?????as[i].onmouseover?=?function(){
?????if(index!=?-1){
?????if(as[index].style.background="#ccc"){
as[index].style.background?=?"#fff";
????}}
?????this.style.background?=?"#ccc";
?????//如何“滑過鼠標(biāo)時(shí)同時(shí)獲取當(dāng)前數(shù)組的索引？”
?????
?????}
?????as[i].onmouseout?=?function(){
?????this.style.background?=?"#fff";
?????}
?????as[i].onclick?=??function(){
?????title.innerHTML?=?this.innerHTML;
?????}
?????}
????//?點(diǎn)擊頁面空白處時(shí)隱藏ul
?????document.onclick?=?function(){
?????menu.style.display?=?"none";
?????}
?}
???</script>
</head>
<body>
<div?id="divselect">
??????<cite>請選擇分類</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>代表如上，就是實(shí)現(xiàn)滑過鼠標(biāo)時(shí)同時(shí)改變index的值，謝謝~
如何滑過鼠標(biāo)時(shí)同時(shí)獲取滑過數(shù)組的索引？
一二得三
2017-01-03 23:58:37
