选项卡切换图片

最新推荐文章于 2022-03-01 11:41:14 发布

lusizhifei

最新推荐文章于 2022-03-01 11:41:14 发布

阅读量587

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/lusizhifei/article/details/56022132

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡切换图片</title>
<style>
*{margin:0;padding:0;}

#tab{margin:20px auto;width:500px;height:auto;}
ul{width:500px;height:40px;background:#f3f1f1;line-height:40px;border:1px solid #d5d1d1;}
ul li{float:left;list-style:none;width:70px;text-align:center;height:40px;color:#333;font-weight:600;}
ul .select{background:#fff;cursor:pointer;height:39px;border-left:1px solid #d5d1d1;;border-right:1px solid #d5d1d1;
border-top:3px solid #fca825;margin-top:-1px;}
p{width:500px;height:500px;background:red;display:none;}
#tab .select{display:block;}
img{width:500px;height:500px;}
</style>
</head>

<body>
<div id="tab">

<ul>
<li class="select">视屏</li>
<li>综艺</li>
<li>秒拍</li>

</ul>
<p class="select"><img src="img/miaopai.jpg"/></p>
<p ><img src="img/shiping.jpg"/></p>
<p ><img src="img/zhongyi.jpg"/></p>
</div>
</body>
<script>
var Tab=document.getElementById("tab");
var oLis=Tab.getElementsByTagName("li");
var oPs=Tab.getElementsByTagName("p");

for(var i=0;i<oLis.length;i++){
var oLi=oLis[i];
oLi.tab=i;
oLi.οnmοuseοver=function(){
for(var j=0;j<oLis.length;j++){
oLis[j].className="";
oPs[j].className="";
}
this.className="select";
oPs[this.tab].className="select";

}

}
</script>
</html>

lusizhifei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡切换图片

选项卡切换图片*{margin:0;padding:0;}#tab{margin:20px auto;width:500px;height:auto;}ul{width:500px;height:40px;background:#f3f1f1;line-height:40px;border:1px solid #d5d1d1;}ul li{float:left;list
复制链接

扫一扫