日期:2014-05-17  浏览次数:20690 次

为什么这个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"