点击对应按钮显示对应图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.btn{
width: 100px;
color: red;
font-size: 20px;
background-color: yellow;
display: inline-block;
text-align: center;
}
.showDiv{
width: 400px;
height: 200px;
background-color: cyan;
color: red;
font-size: 30px;
text-align: center;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div>
<span class="btn">1</span>
<span class="btn">2</span>
<span class="btn">3</span>
<span class="btn">4</span>
</div>
<div class="showDiv">第一块</div>
<div class="showDiv hidden">第二块</div>
<div class="showDiv hidden">第三块</div>
<div class="showDiv hidden">第四块</div>
</body>
<script type="text/javascript">
var btn=document.getElementsByClassName('btn');
var showDiv=document.getElementsByClassName('showDiv');
for( var i=0;i<btn.length;i++){
(function(a){
btn[i].οnclick=function(){
//让所有btn背景颜色初始化为黄色
for(var j= 0 ; j < btn.length ; j++){
btn[j].style.backgroundColor = "yellow";
showDiv[j].style.display="none";
}//this指向的是触发事件的元素
this.style.backgroundColor="gray";
showDiv[a].style.display="block";
}
})(i);
}
</script>
</html>
效果展示
【yoyo】点击切换图片
最新推荐文章于 2022-11-29 09:02:57 发布