tab选项卡js和jquery的写法

一、JS的写法

.active{
    background:red;
}
#div1 div{
    width:200px;
    height:200px;
    border:1px solid red;
    display:none;
}

<div id="div1">
    <input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block;">111</div>
    <div>222</div>
    <div>333</div>
</div>

window.onload=function(){
    var oDiv=document.getElementById("div1");
    var aInput=oDiv.getElementsByTagName("input");
    var aDivCon=oDiv.getElementsByTagName("div");
    for(var i=0;i<aInput.length;i++){
        aInput[i].index=i;
        aInput[i].onclick=function(){
            for( var i=0;i<aInput.length;i++){
                aInput[i].className="";
                aDivCon[i].style.display="none";
            }
            this.className="active";
            aDivCon[this.index].style.display="block";
        }
    }
}

 

二、jquery的写法

$(function(){
    $("#div1").find("input").click(function(){
        $("#div1").find("input").attr("class","");
        $("#div1").find("div").css("display","none");
        $(this).attr("class","active");                         
       $("#div1").find("div").eq($(this).index()).css("display","block")
    });
})