首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

看看这个索引有关问题

2012-08-01 
看看这个索引问题!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/T

看看这个索引问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
  .s_btn {
  background: url("img/i-1.0.0.png") repeat scroll 0 0 #DDDDDD;
  cursor: pointer;
  font-size: 14px;
  height: 32px;
  width: 95px;
  }
  .s_ipt_wr {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: url("i-1.0.0.png") no-repeat scroll -304px 0 transparent;
  border-color: #9A9A9A #CDCDCD #CDCDCD #9A9A9A;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  height: 30px;
  margin-right: 5px;
  vertical-align: top;
  width: 418px;
}
input {
  border: 0 none;
  padding: 0;
}
#language{
  border:1px solid blue; position:relative;
}
#change{
  position:absolute;
top:24px;
left:-50px;
list-style:none;
margin:0px;
padding:0px;
width:60px;
border:1px solid blue;
border-bottom:none;
display:none;
}
#change.active{display:block;}
#change li {border-bottom:1px solid blue;}
#change li.current{background:gray;}
  </style>
  <script type="text/javascript">
  <!--
  window.onload=function(){
var language = document.getElementById("language");
  var change=document.getElementById("change");
  var on=document.getElementById("on");
  var lis=document.getElementsByTagName("li");
  language.onclick=function(){
  change.className='active';
  }
  for(var i=0;i<lis.length;i++){
lis[i].index = i;
  lis[i].onmouseover=function(){
alert(i)
for(i=0;i<lis.length;i++){
lis[i].className='';
};
this.className='current';
  }
  lis[i].onclick=function(){
alert(i)
  if(this.index==2){
  on.innerHTML='输入法';
  }else{
  on.innerHTML=this.innerHTML;
  }
change.className='';
  }
  };
  };
  //-->
  </script>
 </head>

 <body>
  <div style="text-align:center;">
<img src="baidu_sylogo1.gif"/></br/>
</div>
  <div style="text-align:center;">
  <span class="s_ipt_wr"><input/></span>
  <input type="button" class="s_btn" value="百度一下"/>
  <a id="on" href="javascript:;">输入法</a>
<span id="language">
  <ul id="change">
  <li>手写</li>


  <li>拼音</li>
  <li>关闭</li>
  </ul>
  </span>
   
  </div>
 </body>
</html>


在2个alert处的i为什么会一直输出3这个数字????在for循环中的i一直都不可能等于3啊 因为长度为3 i走到 2的时候就会停止循环 求解 求解 说详细点 谢谢了

[解决办法]
(1)onload()函数执行后 i=3 ;
(2)onload()执行后 lis[i].onmouseover=function(){ alert(i);....}并没有执行;当你真正触发函数的时候 访问的i是onload执行过后的i
[解决办法]
循环结束了,i就是3啊。有错吗?

热点排行