问答详情
源自：10-1 编程挑战

大神们，请从for那开始解释代码原理？谢谢！

<script type="text/javascript">

         window.onload = function(){

             var oTab = document.getElementById("tabs");

             var oUl = oTab.getElementsByTagName("ul")[0];

             var oLis = oUl.getElementsByTagName("li");

             var oDivs= oTab.getElementsByTagName("div");


             for(var i= 0,len = oLis.length;i<len;i++){

                 oLis[i].index = i;

                 oLis[i].onclick = function() {

                     for(var n= 0;n<len;n++){

                         oLis[n].className = "";

                         oDivs[n].className = "hide";

                     }

                     this.className = "on";

                     oDivs[this.index].className = "";

                 }

             };

         }

    </script>


提问者：慕粉3598977 2016-11-05 22:04

个回答

  • 顾非白
    2016-11-07 21:47:57

    http://img.mukewang.com/582085e8000180bc09220293.jpg希望有所帮助

    2
  • stone310
    2016-11-05 23:16:28

    for(var i= 0,len = oLis.length;i<len;i++){  //for遍历oLis
                 oLis[i].index = i;          //保存每一个i值到对应的每一个oLis上
                 oLis[i].onclick = function() { //点击
                     for(var n= 0;n<len;n++){    //再次对oLis遍历
                         oLis[n].className = "";  //所有oLis的class为空
                         oDivs[n].className = "hide";  //所有oDiv的class为hide
                     }
                     this.className = "on";      //当前点击的oLis 的class为on
                     oDivs[this.index].className = "";  //当前点击的oLis的i值所对应的oDivs的class为空
                 }
             };
         }


    0