Js关于选项卡的问题

幻音十八 2015-06-09 12:38:41

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		.active{

			background-color:#796ABF;

		}

		#div1 div{

			width:200px;

			height: 200px;

			background: #CCC;

			border:1px solid #000 ;

			display: none;

		}

	</style>

	<script type="text/javascript">

	window.onload=function(){

		var aDiv=document.getElementById('div1');

		var oBtn=document.getElementsByTagName('input');

		var bDiv=aDiv.getElementsByTagName('div');

		for(var i=0;i<oBtn.length;i++)

		{

			//切换标签颜色 Begin

			oBtn.index=i;	// A

			oBtn.onclick=function () {

				for(var i=0;i<oBtn.length;i++)	//运行正常,发现i的定义很奇怪

				{

					bDiv.style.display='none';

					oBtn.className='';//class'N'ame

				}

				this.className='active';

				bDiv.style.display='block';	//A 

			};//切换 End

		};

	};

	</script>

</head>

<body>

	<div id="div1">

		<input type="button" value="进口" class='active'>

		<input type="button" value="出口">

		<input type="button" value="顺差">

		<div style="display:block;">123</div>

		<div>234</div>

		<div>345</div>

	</div>

</body>

</html>

看视频所学习并编写的代码发现有两个问题:
//A处为问题代码块:
1.为什么34行改成bDiv[i].style.display='block';是不可以的,即需要添加标签?
2.23行和28行中的i在浏览器下运行正常,意思是不是这两个i的定义只在自己的函数起作用?

...全文

139 2 打赏收藏举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

幻音十八 2015-06-09

打赏
举报

自己在27行28行和35行中添加了alert(i)的代码发现在28行中的i为undefinded 解决了自己的第二个问题后来利用alert()也发现了自己的第一个问题,即使两个i在不同的作用域内,但是他们的值都没法变化,所以定义一个tmp变量,在onclick函数开头就将i赋值给tmp,最后只需要调用tmp即可.. 然后看到楼上发了

(function(i){})(i)

的函数重新翻看了闭包内容,重新了解了一下概念,感谢!

Braska 2015-06-09

打赏
举报

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.active{
			background-color:#796ABF;
		}
		#div1 div{
			width:200px;
			height: 200px;
			background: #CCC;
			border:1px solid #000 ;
			display: none;
		}
	</style>
	<script type="text/javascript">
	window.onload=function(){
		var aDiv=document.getElementById('div1');
		var oBtn=document.getElementsByTagName('input');
		var bDiv=aDiv.getElementsByTagName('div');
		for(var i=0;i<oBtn.length;i++)
		{
			//切换标签颜色 Begin
			(function(index){
			oBtn[index].onclick=function () {
				for(var j=0;j<oBtn.length;j++)	//运行正常,发现i的定义很奇怪
				{
					bDiv[j].style.display='none';
					oBtn[j].className='';//class'N'ame
				}
				this.className='active';
				bDiv[index].style.display='block';	//A 
			};//切换 End
			})(i);
		}
	};
	</script>
</head>
<body>
	<div id="div1">
		<input type="button" value="进口" class='active'>
		<input type="button" value="出口">
		<input type="button" value="顺差">
		<div style="display:block;">123</div>
		<div>234</div>
		<div>345</div>
	</div>
</body>
</html>

楼主可以看看js闭包的内容