js学习笔记：tab选项卡切换

使用js实现tab选项卡切换。因为只是笔记，所以就写的比较简单。

style部分：

    <style>
        .hidden{
            display: none;
        }
    </style>

body部分：

    <input type="button" value="1" class="active">
    <input type="button" value="2">
    <input type="button" value="3">

    <div>
        <div class="active" name="div_show">111</div>
        <div class="hidden" name="div_show">222</div>
        <div class="hidden" name="div_show">333</div>
    </div>

js部分：

        //获取input点击按钮
        var inputs=document.getElementsByTagName("input");
        //获取显示页面
        var div_show=document.getElementsByName("div_show");
        for(var i=0;i<inputs.length;i++){
            inputs[i].index=i; //index返回下拉列表中选项的索引位置
            inputs[i].onclick=function(){
                //若想要鼠标滑动，则为inputs[i].onmouseover
                for(var j=0;j<inputs.length;j++){
                    //方法1
                    inputs[j].className=''; //当前class为空
                    div_show[j].style.display='none'; //当天所对应的显示页面的内容进行隐藏
                    //方法1结束
                    //方法2
                    // inputs[j].classList.remove("active");
                    // div_show[j].setAttribute("class","hidden");
                    //方法2结束
                }
                //方法1
                this.className='active'; //将所选择的页面的class名为active
                div_show[this.index].style.display='block'; //所对应的页面显示区域变为块显示
                //方法1结束
                //方法2
                // this.setAttribute("class","active");
                // div_show[this.index].classList.remove("hidden");
                //方法2结束
            }
        }

备注是我简单的理解，注意方法1和方法2同时使用，不能分离。若js写在head里面，需要写在     window.οnlοad=function(){函数体}  函数体中。