Maison >interface Web >tutoriel HTML >为什么这个className转换没有用？_html/css_WEB-ITnose
为什么这个className转换没有用？_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 09:36:31941parcourir
<!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"/ alt="为什么这个className转换没有用？_html/css_WEB-ITnose" ></br/></div> <div style="max-width:90%"> <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>
回复讨论(解决方案)
className是什么？我就知道class
className是什么？我就知道class
className 就是在js中对应css的class类样式的一个属性 你没有接触？？？
不明白LZ的意思。我看代码没问题！什么效果！
搞定了！不知道是不是你要的效果
<!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"/ alt="为什么这个className转换没有用？_html/css_WEB-ITnose" ></br/></div> <div style="max-width:90%"> <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
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：请教一下这个DIV怎么布局，谢谢解答_html/css_WEB-ITnoseArticle suivant：如何屏蔽这样的下载 请高人点拨一下，问题有图片_html/css_WEB-ITnose