Rumah > hujung hadapan web > html tutorial > 为什么这个className转换没有用?_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-21 09:36:31
asal
948 orang telah melayarinya

<!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>
Salin selepas log masuk


回复讨论(解决方案)

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>
Salin selepas log masuk

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

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>
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan