5.1点击4个按钮显示相应的div

事件：onclick

属性：display，className

用到for语句，index标记，this当前事件

先清空后附加

 

charset="UTF-8">

女装，男装，童装

家具用品

户外运动

注意事项

/////////////////css

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

/////////////////////////js

window.οnlοad=function(){
var oDiv=document.getElementById("div1");
var oBtn=oDiv.getElementsByTagName("input");
var aDiv=oDiv.getElementsByTagName("div");
for(var i=0;i oBtn[i].index=i;
oBtn[i].οnclick=function(){
for(var i=0;i oBtn[i].className="";
aDiv[i].style.display="none";
};
this.className="active";
aDiv[this.index].style.display="block";
};

}
};

转载于:https://www.cnblogs.com/luxiaoli/p/8505433.html