实例
<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8">
<title>tab图片切换</title>
</head>
<style>
#box{
width: 500px;
height: 280px;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
span{
display: inline-block;
width: 80px;
background-color: skyblue;
border: 2px solid #999;
margin-bottom: 5px;
cursor: pointer;
}
img{
width: 500px;
height: 280px;
}
</style>
<body>
<div id="box">
<span onclick="fun(0)">切换1</span>
<span onclick="fun(1)">切换2</span>
<span onclick="fun(2)">切换3</span>
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
</div>
<script>
function fun(x){
var span = document.getElementsByTagName('span');
var box = document.getElementById('bxo')
var img =document.getElementsByTagName('img')
for(var i=0;i<img.length;i++){
img[i].style.display="none";
}
img[x].style.display="block";
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
