The code block in the for loop in the following js code is not well understood. Ask for advice.



<!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";}
        -sharptabs {width:290px;padding:5px;height:150px;margin:20px;}
        -sharptabs ul{
            list-style:none;display: block;height:30px;line-height:30px;
            border-bottom:2px saddlebrown solid;
        }
        -sharptabs ul li{
            background:-sharpfff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;
            margin:0px 3px;border:1px solid -sharpaaaaaa;border-bottom:none;
            display:inline-block;width:60px;text-align: center;
        }
        -sharptabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid -sharpfff;}
        -sharptabs div{height:120px;line-height: 25px;border:1px solid -sharp336699;border-top:none;padding:5px;}
        .hide{display: none;}
    </style>
    <script type="text/javascript">
         window.onload = function(){
             //div
             var oTab = document.getElementById("tabs");
            //ul
             var oUl = oTab.getElementsByTagName("ul")[0];
            //ulli
             var oLis = oUl.getElementsByTagName("li");
            //divdiv
             var oDivs= oTab.getElementsByTagName("div");

             for(var i= 0;i<oLis.length;iPP){
                 oLis[i].index = i; //
                 oLis[i].onclick = function() {
                     for(var n= 0;n<oLis.length;nPP){  
                         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 140<br>
         53550<br>
        5000  <br>
    </div>
    <div class="hide">
        40 <br>
         90<br>
         66<br>
         <br>

    </div>
    <div class="hide">
        3260 2250w<br>
        32290 1302<br>
        260 12170!<br>
        280 2248<br>

    </div>
</div>

</body>
</html>

the for loop statement is not well understood. The code is as follows:

for(var i= 0;i<oLis.length;iPP){
                 oLis[i].index = i; //
                 oLis[i].onclick = function() {
                     for(var n= 0;n<oLis.length;nPP){  
                         oLis[n].className = "";
                         oDivs[n].className = "hide";
                     }
                     this.className = "on";
                     oDivs[this.index].className = "";
                 }
             };

The function of the code block statement in the

for loop is not well understood. Please give me some advice. Does
set all li element styles to non-on class styles and all div elements to hide class styles when the click event occurs? Then set the current object li of the click event to the on class style, and the current div style of the corresponding index to the non-hide class style?