有点问题不太能理解

<script type="text/javascript">
window.onload = function(){
    // JS实现选项卡切换
    //获取标题
    var li = document.getElementsByTagName("li");
    //获取内容
    var div = document.getElementsByName("div");
    var len = div.length;
    //选项卡内容多个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配
    for(var i=0;i<len;i++){
        li[i].index = i;
        li[i].onclick = function(){
            for(var j=0;j<len;j++){
                li[j].className = "";
                div[j].style.display = "none";
            }
            this.className = "fang";
            div[this.index].style.display = "block";
        }
    }
}
</script>

其中li[i].index = i;和div[this.index].style.display = "block";这句是什么用？为什么一定要定义一个index呢？直接用i怎么实现不了？