下面的js代碼中for循環(huán)中的代碼塊不是很理解，求指教



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>實踐題 - 選項卡</title>
    <style type="text/css">
        *{padding:0px;margin: 0px;font:12px normal "microsoft yahei";}
        #tabs {width:290px;padding:5px;height:150px;margin:20px;}
        #tabs ul{
            list-style:none;display: block;height:30px;line-height:30px;
            border-bottom:2px saddlebrown solid;
        }
        #tabs ul li{
            background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;
            margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;
            display:inline-block;width:60px;text-align: center;
        }
        #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;}
        #tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;}
        .hide{display: none;}
    </style>
    <script type="text/javascript">
         window.onload = function(){
             //獲取最外層div節(jié)點
             var oTab = document.getElementById("tabs");
            //獲取第一個ul節(jié)點
             var oUl = oTab.getElementsByTagName("ul")[0];
            //獲取ul節(jié)點中的所有l(wèi)i節(jié)點
             var oLis = oUl.getElementsByTagName("li");
            //獲取所有最外層div中的所有div節(jié)點
             var oDivs= oTab.getElementsByTagName("div");

             for(var i= 0;i<oLis.length;i++){
                 oLis[i].index = i; //這一句代碼起什么作用？
                 oLis[i].onclick = function() {
                     for(var n= 0;n<oLis.length;n++){  
                         oLis[n].className = "";
                         oDivs[n].className = "hide";
                     }
                     this.className = "on";
                     oDivs[this.index].className = "";
                 }
             };
         }
    </script>

</head>
<body>
<div id="tabs">
    <ul>
        <li class="on">房產</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div>
        275萬購昌平鄰鐵三居 總價20萬買一居<br>
        200萬內購五環(huán)三居 140萬安家東三環(huán)<br>
        北京首現零首付樓盤 53萬購東5環(huán)50平<br>
        京樓盤直降5000 中信府 公園樓王現房<br>
    </div>
    <div class="hide">
        40平出租屋大改造 美少女的混搭小窩<br>
        經典清新簡歐愛家 90平老房煥發(fā)新生<br>
        新中式的酷色溫情 66平撞色活潑家居<br>
        瓷磚就像選好老婆 衛(wèi)生間煙道的設計<br>

    </div>
    <div class="hide">
        通州豪華3居260萬 二環(huán)稀缺2居250w甩<br>
        西3環(huán)通透2居290萬 130萬2居限量搶購<br>
        黃城根小學學區(qū)僅260萬 121平70萬拋!<br>
        獨家別墅280萬 蘇州橋2居優(yōu)惠價248萬<br>

    </div>
</div>

</body>
</html>

其中的for循環(huán)語句不是很理解，代碼如下：

for(var i= 0;i<oLis.length;i++){
                 oLis[i].index = i; //這一句代碼起什么作用？
                 oLis[i].onclick = function() {
                     for(var n= 0;n<oLis.length;n++){  
                         oLis[n].className = "";
                         oDivs[n].className = "hide";
                     }
                     this.className = "on";
                     oDivs[this.index].className = "";
                 }
             };

for循環(huán)中的代碼塊語句作用不是很理解，請大神指教。
是點擊事件發(fā)生時將所有的li元素樣式設置為非 on類樣式，所有的div元素設置為 hide類樣式嗎？然后再將點擊事件的當前對象li設置為on類樣式，當前對應索引的div樣式設置為非hide類樣式嗎？

回答

編輯回答