您的位置：首页 > 其它

选项卡切换图片

2017-02-20 20:01 162 查看

<!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.onmouseover=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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航