Heim > Web-Frontend > HTML-Tutorial > 为什么这个className转换没有用?_html/css_WEB-ITnose

为什么这个className转换没有用?_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 09:36:31
Original
950 Leute haben es durchsucht

<!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>
Nach dem Login kopieren


回复讨论(解决方案)

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>
Nach dem Login kopieren

搞定了!不知道是不是你要的效果

HTML code


nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 


   New Document …… <br> 效果是对了,不知道为什么我的就不能用呢、、、 <p class="sougouAnswer"> 不明白LZ的意思。我看代码没问题!什么效果! <br> 我想要选择输入法之后,然后change关闭、 </p> <p class="sougouAnswer"> 我搞了接近一个小时终于知道是为什么了 兄弟 你害苦我了,但是也谢谢你 我今天才明白for循环的真正核心啊。看你的问题吧:就是当你点击每一个li项的时候会先触发li上的onclick事件删除了active这个类样式,然后会执行你点击的id=language的span容器上面的onclick,所以当你删除了active这个类样式后,在language上面又点击,为这个change添加了一个类样式也就是active ,所以你没有找到效果。  给分吧 还有不懂 发站内信 <br> <br> <br> <br> come on baby </p> <p class="sougouAnswer"> 再说了 你的span包裹ul本来就不是标准做法,所以你还是把span和ul分开 这样既可以解决问题又可以符合规范   还有问题站内信 </p>
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage