外面一層的for，主要是為了給每個選項卡按鈕綁定onclick事件。

而裡面的這個for，是在綁定的onclick事件之內，它的作用是，
當點擊了被綁定的選項卡時，遍歷所有的選項卡，把不是當前點擊的選項卡片都重置成隱藏狀態，然後這個for下面的：

this.className="active";
ap[this.index].style.display="block";

是把目前點擊項目對應的標籤頁顯示出來。

這樣，就只有目前點擊項目對應的標籤會顯示出來，其餘的標籤頁都被隱藏。
如果沒有這個for，當你點選第一個標籤，第一個標籤顯示出來。
然後你點擊了第二個標籤，第二個標籤顯示出來，現在就有第一個和第二個標籤頁同時顯示；
接著你點擊了第三個標籤，前面兩個沒有隱藏，而第三個標籤頁顯示出來，…………
這樣，到最後，當你點完所有的標籤按鈕時，所有的標籤頁都顯示出來，這顯然不是標籤頁的效果。

為了讓目前點擊之外的標籤頁都隱藏掉，所以在顯示目前標籤頁之前，先用for遍歷，把所有標籤頁隱藏。

大致的功能是要實現點擊切換到該選項卡。
所謂切換，就是其他隱藏，目前顯示。
而你說的部分就是隱藏所有 input 的。
就是每次點擊是，都遍歷一次 所有 input, 去掉 class 和 display 屬性，藏起來，
然後單單為 this, 也就是當前點擊項目加上 class 和 display 屬性，顯示出來

我給程式碼註釋，看到註解就知道了！程式碼原理就是先清除所有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>