javascript - 一个js选项卡的例子中某次遍历的意思不太懂。。。
本文介绍了javascript - 一个js选项卡的例子中某次遍历的意思不太懂。。。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.active{
background: red;
}
#main div{
width: 200px;
height: 200px;
background: yellow;
display: none;
}
</style>
<script>
window.onload=function()
{
var oDiv = document.getElementById('main');
var oIp = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
for(var i=0;i<oIp.length;i++)
{
oIp[i].index=i;
oIp[i].onclick=function()
{
for(var i=0;i<oIp.length;i++) // 就是这儿
{
oIp[i].className="";
aDiv[i].style.display="";
}
this.className="active";
aDiv[this.index].style.display="block"
}
}
}
</script>
</head>
<body>
<div id="main">
<input class="active" type="button" value="111">
<input type="button" value="222">
<input type="button" value="333">
<input type="button" value="444">
<div style="display: block">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
这是一个网上的选项卡的例子,然后不太懂例子中js部分,第二次for循环的意思是什么。。。QAQ
解决方案
外面一层的for,主要是为了给每一个选项卡按钮绑定onclick
事件。
而里面的这个for,是在绑定的onclick
事件之内,它的作用是,
当点击了被绑定的选项卡时,遍历所有的选项卡,把不是当前点击的选项卡都重置成隐藏状态,然后这个for
下面的:
this.className="active";
aDiv[this.index].style.display="block";
是把当前点击项对应的标签页显示出来。
这样,就只有当前点击项对应的标签会显示出来,其余的标签页都被隐藏。
如果没有这个for,当你点击第一个标签,第一个标签显示出来。
然后你点击了第二个标签,第二个标签显示出来,现在就有第一个和第二个标签页同时显示;
接着你点击了第三个标签,前面两个没有隐藏,而第三个标签页显示出来,…………
这样,到最后,你点完所有的标签按钮时,所有的标签页都显示出来,这显然不是标签页的效果。
为了使当前点击之外的标签页都隐藏掉,所以在显示当前标签页之前,先用for
遍历,把所有标签页隐藏。
这篇关于javascript - 一个js选项卡的例子中某次遍历的意思不太懂。。。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文