javascript中的for循环细节问题

最新推荐文章于 2024-02-18 17:41:26 发布

yuxiaoxia28

最新推荐文章于 2024-02-18 17:41:26 发布

阅读量517

点赞数

分类专栏：学习笔记

本文链接：https://blog.youkuaiyun.com/yuxiaoxia28/article/details/45482987

版权

学习笔记专栏收录该内容

17 篇文章

订阅专栏

注意for 循环变量的初始化，我发现变量初始化位置不对，结果出错，代码如下

<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
	<style type="text/css">
	*{
		padding:0;
		margin:0;
		font-size: 14px;
		list-style: none;
	}
	.wrap{
		width:200px;
		margin: 10px auto;
		border: 1px solid #ccc;

	}
	.current{
		background-color: #fff;
	}
	.tit{
		color::#fff;		
		height:20px;
		line-height: 20px;
		margin: 0 auto;	
		background-color: #888;
	}
	.tit ul li{
		width:25%;
		float:left;
		height:20px;
	}
	.a{
		padding-left: 10px;
		display: none;
	}
	.active{
		padding-left: 10px;
		display: block;
	}
	</style>
	<script type="text/javascript">
		window.οnlοad=function(){
			var tit=document.getElementById('tit');
			var titLis=tit.getElementsByTagName('li');
			var conUls=document.getElementById('con').getElementsByTagName('ul');		
			// var i =0;如果变量在这里定义的话，嵌套的for循环只执行两次，
			// var j=0;
			var index;
			for(var i=0;i<titLis.length;i++){//在这初始化结果正确
				titLis[i].index=i;
				titLis[i].οnmοuseοver=function(){
					for(var j=0;j<titLis.length;j++){
						titLis[j].className='';	
						conUls[j].className='a';	
																
					}					
					this.className="current";					
					conUls[this.index].className='active';
				}
				
			}
		}


	</script>
</head>
<body>
	<div class="wrap">
		
		<div class="tit" id="tit">
			<ul>
				<li class="current">遇见</li>
				<li>天黑黑</li>
				<li>逆光</li>
				<li>绿光</li>
			</ul>
		</div>
	
		<div id="con">
			<ul class="active">
			<li>遇见</li>
			<li>天黑黑</li>
			<li>逆光</li>
			<li>绿光</li>
			</ul>
			<ul class="a">
			<li>天黑黑</li>
			<li>遇见</li>
			<li>逆光</li>
			<li>绿光</li>
			</ul>
			<ul class="a">
			<li>逆光</li>
			<li>天黑黑</li>
			<li>遇见</li>
			<li>绿光</li>
			</ul>
			<ul class="a">
			<li>绿光</li>
			<li>天黑黑</li>
			<li>逆光</li>
			<li>遇见</li>
			</ul>
		</div>
	</div>
</body>
</html>