Heim >Web-Frontend >HTML-Tutorial >为什么这个className转换没有用？_html/css_WEB-ITnose
为什么这个className转换没有用？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:36:31941Durchsuche
<!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">
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：请教一下这个DIV怎么布局，谢谢解答_html/css_WEB-ITnoseNächster Artikel：如何屏蔽这样的下载 请高人点拨一下，问题有图片_html/css_WEB-ITnose