这段没看懂,有大神讲解一下吗?

来源:10-1 编程挑战

qq_半夏当归吾思所止_0

2017-04-07 22:15

window.onload=function(){
       // var tab=document.getElementById("tables");
        var li=document.getElementsByTagName("li");
        var div=document.getElementsByTagName("div");
        for(var i=0;i<li.lenghth;i++){
            li[i].index=i;
            li[i].onlick=function(){
             for(var n=0;n<li.length:n++){
                 li[n].className="";
                div[n].className="hide";
                 
             }
              this.className = "on";
              div[this.index].className = "";
            }
            
        }
    }

写回答 关注

2回答

  • Adam静栖
    2017-04-08 17:44:44
    已采纳

    li标签的className的值设置为on,就显示当前的li。

    this.className = "on";就是当前点击的li标签显示

    div[this.index].className = ""; 就是当前li对应的div显示;

    下面这段代码:

      li[i].onlick=function(){
                 for(var n=0;n<li.length:n++){
                     li[n].className="";
                    div[n].className="hide";
                     
                 }
                  this.className = "on";
                  div[this.index].className = "";
                }

    就是点击li的时候 先把所有的li和div都隐藏了,在for循环后面执行的两句就是将点击的li和div显示出来,就实现了切换。

    qq_半夏当...

    非常感谢!谢谢啦

    2017-04-08 19:30:14

    共 1 条回复 >

  • 超人不会飞Mark
    2017-04-08 18:18:56

    window.onload=function(){
           // var tab=document.getElementById("tables");
            var li=document.getElementsByTagName("li");
            var div=document.getElementsByTagName("div");
            for(var i=0;i<li.lenghth;i++){
                li[i].index=i; //给li[i]对象创建了一个新的属性,把索引的值就是i存储到这个属性index中(这是重点),为什么要这样做?因为函数的有单独自己的作用域,外面的i和函数里面的i是不一样的。
                li[i].onlick=function(){ 
                 for(var n=0;n<li.length:n++){
                     li[n].className=""; // 把所有li的className值清空
                    div[n].className="hide"; // 同上,其实这里也可以把div的className="" ,起到把值清空的作用
                 } 
                  this.className = "on";  
                  div[this.index].className = ""; //this.index 就是变量i的值,看前面的代码 li[i].index=i; 
            }
        }

    qq_半夏当...

    谢谢啦

    2017-04-08 19:31:05

    共 1 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468190 学习 · 21891 问题

查看课程

相似问题