<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.active{
background: red;
}
#main p{
width: 200px;
height: 200px;
background: yellow;
display: none;
}
</style>
<script>
window.onload=function()
{
var op = document.getElementById('main');
var oIp = op.getElementsByTagName('input');
var ap = op.getElementsByTagName('p');
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="";
ap[i].style.display="";
}
this.className="active";
ap[this.index].style.display="block"
}
}
}
</script>
</head>
<body>
<p id="main">
<input class="active" type="button" value="111">
<input type="button" value="222">
<input type="button" value="333">
<input type="button" value="444">
<p style="display: block">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</p>
</body>
</html>這是一個網路上的選項卡的例子，然後不太懂例子中js部分，第二次for迴圈的意思是什麼。 。 。 QAQ
大家讲道理2017-06-30 10:00:54
外面一層的for，主要是為了給每個選項卡按鈕綁定onclick事件。
而裡面的這個for，是在綁定的onclick事件之內，它的作用是，
當點擊了被綁定的選項卡時，遍歷所有的選項卡，把不是當前點擊的選項卡片都重置成隱藏狀態，然後這個for下面的：
this.className="active";
ap[this.index].style.display="block";是把目前點擊項目對應的標籤頁顯示出來。
這樣，就只有目前點擊項目對應的標籤會顯示出來，其餘的標籤頁都被隱藏。
如果沒有這個for，當你點選第一個標籤，第一個標籤顯示出來。
然後你點擊了第二個標籤，第二個標籤顯示出來，現在就有第一個和第二個標籤頁同時顯示；
接著你點擊了第三個標籤，前面兩個沒有隱藏，而第三個標籤頁顯示出來，…………
這樣，到最後，當你點完所有的標籤按鈕時，所有的標籤頁都顯示出來，這顯然不是標籤頁的效果。
為了讓目前點擊之外的標籤頁都隱藏掉，所以在顯示目前標籤頁之前，先用for遍歷，把所有標籤頁隱藏。
怪我咯2017-06-30 10:00:54
大致的功能是要實現點擊切換到該選項卡。
所謂切換，就是其他隱藏，目前顯示。
而你說的部分就是隱藏所有 input 的。
就是每次點擊是，都遍歷一次 所有 input, 去掉 class 和 display 屬性，藏起來，
然後單單為 this, 也就是當前點擊項目加上 class 和 display 屬性，顯示出來
过去多啦不再A梦2017-06-30 10:00:54
我給程式碼註釋，看到註解就知道了！程式碼原理就是先清除所有input的類別名稱和隱藏所有的p，然後給目前點選的input加上類別名，顯示目前索引對應的p!
<script>
window.onload=function()
{
var op = document.getElementById('main');
var oIp = op.getElementsByTagName('input');
var ap = op.getElementsByTagName('p');
//遍历input
for(var i=0;i<oIp.length;i++)
{
//自定义属性index，（）
oIp[i].index=i;
//给每一个input绑定点击事件
oIp[i].onclick=function()
{
//首先，清除掉所有的input的类名和p的样式（就是让所有p先隐藏）。
for(var i=0;i<oIp.length;i++) // 就是这儿
{
oIp[i].className="";
ap[i].style.display="";
}
//当前的input添加类名
this.className="active";
//根据当前input的索引，把对应的索引的p加上样式（就是让对应的索引的p现实）
ap[this.index].style.display="block"
}
}
}
</script>