Home >Web Front-end >HTML Tutorial >为什么这个className转换没有用？_html/css_WEB-ITnose
为什么这个className转换没有用？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:36:31949browse
<!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">
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：请教一下这个DIV怎么布局，谢谢解答_html/css_WEB-ITnoseNext article：如何屏蔽这样的下载 请高人点拨一下，问题有图片_html/css_WEB-ITnose