<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;padding: 0}
.big{margin-left: 100px}
.box{width:300px;height:40px;display: inline-block;margin-top: 200px;}
input{width: 280px;height: 20px;padding:9px 8px 8px;font-size:20px;font-family: Arial;font-weight: normal;display: inline-block;}
li{list-style: none;line-height: 25px;padding: 0 8px;position:relative;}
li span{cursor: pointer;width: 80%;display: inline-block;}
li a{position: absolute;right: 0;width: 20%;text-align: right;}
.content{width: 298px;height:auto;border: 1px solid #ccc;display: none;}
.hover{background: #ccc;}
</style>
</head>
<body>
<div class="big">
<span class="box">
<input type="text" value="" id="btn">
</span>
<div class="content" id="content">
<ul>
<li class="hover span"><span>百度一下,你就知道</span><a href="" class="delete">删除</a></li>
<li><span class="span">百度一下,你就知道</span><a href="" class="delete">删除</a></li>
<li><span class="span">百度一下,你就知道</span><a href="" class="delete">删除</a></li>
<li><span class="span">百度一下,你就知道</span><a href="" class="delete">删除</a></li>
<li><span class="span">百度一下,你就知道</span><a href="" class="delete">删除</a></li>
<li><span class="span">百度一下,你就知道</span><a href="" class="delete">删除</a></li>
<li><span class="span">百度一下,你就知道</span><a href="" class="delete">删除</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var $=function(id){
return document.getElementById(id);
}
var btn=$("btn");
var content=$("content");
var oLi=content.getElementsByTagName('li');
var oSpan=document.getElementsByTagName('span');
btn.onfocus=function(){
content.style.display='block';
}
for(var i=0;i<oLi.length;i++){
oLi[i].onmouseover=function(){
for(j=0;j<oLi.length;j++){
oLi[j].className='';
}
this.className='hover';
}
oLi[i].onmouseout=function(){
this.className='';
}
}
function clock(){
for(var i=0;i<oLi.length;i++){
oLi[i].onclick=function(){
location.href='http://www.baidu.com';
}
}
}
btn.onblur=function(){
setTimeout(function(){
content.style.display='none';
},1000)
}
function del(el){
el.parentNode.parentNode.removeChild(el.parentNode);
}
function addEvent(el,type,fn){
if(el.addEventListener){
el.addEventListener(type,fn,false);
}else{
el.attachEvent('on'+type,fn);
}
}
addEvent(content,'click',function(e){
var e=e||window.event;
var target=e.target||e.srcElement;
switch(target.className){
case 'span':
clock();
break;
case 'delete':
del(target);
break;
}
})
</script>
</body>
</html>
1.把function clock()修改为:
function clock(){
for(var i=0;i<oSpan.length;i++){
oSpan[i].href='http://www.baidu.com';
}
}
2.addEvent调用修改为:
addEvent(content,'click',function(e){
var e=e||window.event;
var target=e.target||e.srcElement;
switch(target.className){
case 'span':
clock();
location = target.href;
break;
case 'delete':
del(target);
break;
}
})
3.第一个span加上class="span"