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

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

WBOY
Release: 2016-06-21 09:36:31
Original
946 people have browsed it

<!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>
Copy after login


回复讨论(解决方案)

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>
Copy after login

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

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>
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template