为什么这个className转换没有用？
- HTML code
<!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("http://s1.bdstatic.com/r/www/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("http://s1.bdstatic.com/r/www/img/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.getElementById("change").getElementsByTagName("li"); language.onclick=function(){ change.className='active'; } var i=0; for(i=0;i<lis.length;i++){ lis[i].index=i; lis[i].onmouseover=function(){ for(i=0;i<lis.length;i++){ lis[i].className=''; }; this.className='current'; } lis[i].onclick=function(){ if(this.index==2){ on.innerHTML='输入法'; }else{ on.innerHTML=this.innerHTML; } change.className=''; } }; }; //--> </script> </head> <body> <div style="text-align:center;"><img src="http://www.baidu.com/img/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">V <ul id="change"> <li>手写</li> <li>拼音</li> <li>关闭</li> </ul> </span> </div> </body></html>[解决办法]
搞定了！不知道是不是你要的效果
- HTML code
<!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("http://s1.bdstatic.com/r/www/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("http://s1.bdstatic.com/r/www/img/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.getElementById("change").getElementsByTagName("li"); language.onclick=function(){ if(change.className=="active") change.className=''; else change.className="active"; } var i=0; for(i=0;i<lis.length;i++){ lis[i].index=i; lis[i].onmouseover=function(){ for(i=0;i<lis.length;i++){ lis[i].className=''; }; this.className='current'; } lis[i].onclick=function(){ if(this.index==2){ on.innerHTML='输入法'; }else{ on.innerHTML=this.innerHTML; } change.className=''; language.onclick(); } } } //--> </script> </head> <body> <div style="text-align:center;"><img src="http://www.baidu.com/img/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">V <ul id="change"> <li>手写</li> <li>拼音</li> <li>关闭</li> </ul> </span> </div> </body></html>
[解决办法]
我搞了接近一个小时终于知道是为什么了 兄弟 你害苦我了，但是也谢谢你 我今天才明白for循环的真正核心啊。看你的问题吧：就是当你点击每一个li项的时候会先触发li上的onclick事件删除了active这个类样式，然后会执行你点击的id=language的span容器上面的onclick，所以当你删除了active这个类样式后，在language上面又点击，为这个change添加了一个类样式也就是active ，所以你没有找到效果。 给分吧 还有不懂 发站内信
come on baby