鼠标滑过选项卡切换图片

最新推荐文章于 2019-07-30 21:55:03 发布

chike8692

最新推荐文章于 2019-07-30 21:55:03 发布

阅读量197

点赞数

原文链接：https://my.oschina.net/LeesurYoo/blog/652513

版权

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>鼠标滑过选项卡切换图片</title>

<style>

input{background:white;}

.active{background:red;}

div{

width:300px;

height:200px;

background:gray;

margin-bottom:10px;

display:none;

}

</style>

<script>

window.οnlοad=function ()

{

var oInput=document.getElementsByTagName('input');

var oDiv=document.getElementsByTagName('div');

var i=0;

for(i=0;i<oInput.length;i++)

{

oInput[i].index=i

oInput[i].οnmοuseοver=function ()

{

for(i=0;i<oInput.length;i++)

{

oInput[i].style.background="none";

oDiv[i].style.display="none";

}

this.style.background="red";

oDiv[this.index].style.display="block";

}

}

}

</script>

</head>

<body>

<input class="active" type="button" value="按钮1">

<input type="button" value="按钮2">

<input type="button" value="按钮3" >

<div style="display:block">

<img src="./images/u=1259803343,3860580242&fm=11&gp=0.jpg" width='300px' height='200px' title="" alt="" />

</div>

<div>

<img src="./images/u=1491680822,4259060158&fm=21&gp=0.jpg" width='300px' height='200px' title="" alt="" />

</div>

<div>

<img src="./images/u=2092545718,2399576582&fm=21&gp=0.jpg" width='300px' height='200px' title="" alt="" />

</div>

</body>

</html>

转载于:https://my.oschina.net/LeesurYoo/blog/652513

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。