html--通过javascript实现选项卡切换

通过点击上面的标签，切换下面的页面内容，

html代码：

<div id="tab">
<ul>
<li class="on"><span>首页</span></li>
<li class="off"><span>我要融资</span></li>
<li class="off"><span>新手指南</span></li>
</ul>
<div class="show">页面1</div>
<div class="hide">页面2</div>
<div class="hide">页面3</div>
</div>

javascript代码：

    <script type="text/javascript">
    // JS实现选项卡切换
    window.onload = function(){
    var myTab = document.getElementById("tab");    //整个div
    var myUl = myTab.getElementsByTagName("ul")[0];//tab下的一个ul节点
    var myLi = myUl.getElementsByTagName("li");    //ul下的li数组
    var myDiv = myTab.getElementsByTagName("div"); //tab下的div数组


    for(var i = 0; i<myLi.length;i++){  //对li数组进行循环
        myLi[i].index = i;
        myLi[i].onclick = function(){ //判断哪一个li标签被点击
            for(var j = 0; j < myLi.length; j++){ //对li数组进行循环
                myLi[j].className="off"; //所有li设置为off状态，即不被点击状态
                myDiv[j].className = "hide"; //所有的div内容设置为hide状态，即隐蔽状态
            }
            this.className = "on"; //当前被点击的标签li设置为on，即被点击状态
            myDiv[this.index].className = "show"; //当前标签的内容设置为show，即显示状态
        }
      }
    }
    </script>