原理：
页面布局：3个按钮+3个div
点击某个按钮，使得某个div显示其余的2个div隐藏起来
<html>
<head>
<style>
input{background:white;}
div{width:550px;height:420px;display:none}
.active{background:yellow;}
</style>
<script>
window.οnlοad=function(){
var bTn=document.getElementsByTagName("input");
var div=document.getElementsByTagName("div");
for(var i=0;i<bTn.length;i++){
var j=i;
(function(j){
bTn[j].οnclick=function(){
for(var i=0;i<bTn.length;i++){ //清除所有的按钮和div格式
bTn[i].className="";
div[i].style.display="none";
}
this.className="active"; //使得当前点击的按钮(放生点击事件的按钮）改变颜色
div[j].style.display="block";//使得对应的div层显示出来
};
})(i);
}
};
</script>
</head>
<body>
<input type="button" value="1" class="active"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
<div style="display:block;"><img src="sharapova2.jpg"/></div> <!--这里的样式会覆盖css中的样式 -->
<div><img src="sharapova3.jpg"/></div>
<div><img src="sharapova4.jpg"/></div>
</body>
</html>
效果图：
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
