tab切换图片

来源：互联网发布：淘宝客是怎么推广的编辑：程序博客网时间：2024/05/17 01:42

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.btn{
color: red;
font-size: 20px;
background-color: yellow;
display: inline-block;
width: 72px;
text-align: center;
}
.show_div{
width: 300px;
height: 200px;
font-size: 30px;
}
.hidden_div{
display: none;
}
img{
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<center>
<div>
<span class="btn">1</span>
<span class="btn">2</span>
<span class="btn">3</span>
<span class="btn">4</span>
</div>
<div class="show_div"><img src="img/1.jpg"></div>
<div class="show_div hidden_div"><img src="img/2.jpg"></div>
<div class="show_div hidden_div""><img src="img/3.jpg"></div>
<div class="show_div hidden_div""><img src="img/4.jpg"></div>
</center>
</body>
<script type="text/javascript">
//获取元素
var btn=document.getElementsByClassName('btn');
var showDiv=document.getElementsByClassName('show_div');

for (var i = 0; i < btn.length; i++) {
//btn[i].a=i;
(function(a){
btn[i].onclick=function(){
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>

阅读全文

0 0