<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>切換菜單</title>
<link?rel="stylesheet"?type="text/css"?href="11.css"/>
<script?src="11.js"?type="text/javascript"?charset="utf-8"></script>
</head>
<body>
<div>
<p?id='pid'>請選擇分類</p>
<span?class="img"?id="img"></span>
<ul?class="dis"?id="ul">
<li>ASP開發(fā)</li>
<li>.NET開發(fā)</li>
<li>PHP開發(fā)</li>
<li>Javascript開發(fā)</li>
<li>Java特效</li>
</ul>
</div>
</body>
</html>*{
margin:?0;
padding:?0;
}
div{
width:?300px;
margin:?3em?auto;
text-align:?center;
}
p{
border:?2px?solid?lightsteelblue;
width:?300px;
height:?1.2em;
line-height:?1.2em;
}
ul{
list-style:?none;
border:?2px?solid?lightsteelblue;
border-top:?none;
width:?300px;
height:?6em;
line-height:?1.2em;
}
.dis{
display:?none;
}
.di{
display:?block;
}
.img{
display:?block;
border:?2px?solid?lightsteelblue;
height:1.2em;
width:?1em;
position:?absolute;
top:?3em;
background:?url(imgs/ptlogin.png)?no-repeat?top?-1em?left?5px;
cursor:?pointer;
}window.onload=function(){
aa()
};
function?aa(){
var?span=document.getElementById('img');
var?ul=document.getElementById('ul');
span.onclick=open;
document.onclick=clear;
li=ul.childNodes;
for(var?i=0;i<li.length;i++){
li[i].onmouseover=show;
li[i].onmouseout=hide;
li[i].onclick=replace;
}
document.onkeydown=show_1;?
}
function?open(event){
event.stopPropagation();
ul.className='di';
}
function?clear(){
ul.className='dis';
}
function?show(){
this.style.backgroundColor='gray';
}
function?show_1(event){
if(event.keyCode===13){
clear();
}
if(event.keyCode===40){
li[0].style.backgroundColor='gray';
}
if(event.keyCode===38){
}
}
function?hide(){
this.style.backgroundColor='white';
}
function?replace(){
pid=document.getElementById('pid');
pid.innerHTML=this.innerHTML;
}測試按鍵的時候li[0]為什么都無法讀取有沒有一種好的方法可以更改this指向
鍵盤事件怎么處理
清風(fēng)流光
2017-05-05 13:51:04
