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的定义只在自己的函数起作用?
...全文
148 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
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闭包的内容

87,885

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧