为什么要用div[this.index]而不阔以直接用div[i]?

window.onload=function(){
        var oTab = document.getElementById("tabs")
        var li = document.getElementsByTagName("li");
        var p = oTab.getElementsByTagName("p");//oTabs.get...是为了定义className作用对象为id为tabs下的所有文本div
        
        for(var i=0;i<li.length;i++){//获取所有i编号的元素
          li[i].index = i;  //定义一个index属性对li进行编号
            li[i].onclick = function(){//再注册一个点击事件，当点击的时候所有标签都恢复最初状态
            for(var n=0;n<li.length;n++){//这步是相对于未被点击部分的样式
                li[n].className = "";
                p[n].className = "hide";
            }
            this.className = "on";//再对点击事件添加相应的属性
            p[this.index].className = "";//通过之前的index编号绑定的指定div
            }
        }
    }

倒数第四行为什么要构建li[i].index=i;而且倒数第四行还要用p[this.index]。为什么把li[i].index=i删掉，倒数第四行改成p[i]不阔以呢？