基于javascript实现最简单选项卡切换

    第一课

      

• 改变网页背景颜色

      

• 函数传参

      

• 高重用性函数的编写

      

• 126邮箱全选效果

      

• 循环及遍历操作

      

• 调试器的简单使用

      

• 典型循环的构成

      

• for循环配合if判断

    

      

• 函数详解：函数构成、调用、事件、传参数

      

• 定时器的使用：setInterval、setTimeout

      

• 定时器应用：站长站导航效果

      

• 定时器应用：自动播放的选项卡

      

• 定时器应用：数码时钟

      

• 程序调试方法

    

(function(){

    var $ = function(id){

      return document.getElementById(id);

    }

    //取到相应的dom节点

    var myli = $("tab").getElementsByTagName("li");

    var myul = $("content").getElementsByTagName("ul");

    //循环，让每个小选项卡对应相应的ul，对应的显示，不对应的隐藏

    for(var i=0;i

      myli[i].index= i; //取到对应的下标

      myli[i].onmouseover=function(){

        //循环要显示的ul，当下标等于鼠标滑过事件的li时，样式才发生改变

        for(varn=0;n

          myli[n].className="";

          myul[n].style.display="none";

          this.className="current";

          myul[this.index].style.display="block";

        }

      }

    }

})()