实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js实现tab标签切换</title>
<style type="text/css">
*{margin:0;padding:0;}
div{width: 506px;height:400px;margin:50px auto;overflow: hidden;}
li{list-style: none}
#tab_list{text-align: center;height: 40px;line-height: 40px;border-bottom: none;}
#tab_list li{float:left;width: 100px;height:40px;border: 1px solid #ccc;border-right: none;cursor: pointer;}
#tab_list li:last-of-type {
border-right: 1px solid #ccc;
}
#tab_list li:hover {
background: #ccc;
}
img{width: 510px;height: 360px;}
/*p span{
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
background: rgba(254,254,254,0.3);
border-radius: 50%;
line-height: 20px;
cursor: pointer;
}*/
</style>
</head>
<body>
<div>
<ul id="tab_list">
<li onmouseover="change(0)">1</li>
<li onmouseover="change(1)">2</li>
<li onmouseover="change(2)">3</li>
<li onmouseover="change(3)">4</li>
<li onmouseover="change(4)">5</li>
</ul>
<!-- <p>
<span onclick="change(0)">1</span>
<span onclick="change(1)">2</span>
<span onclick="change(2)">3</span>
<span onclick="change(3)">4</span>
<span onclick="change(4)">5</span>
</p> -->
<ul class="tab_img">
<li><a href=""><img src="static/images/1.jpg" alt=""></a></li>
<li><a href=""><img src="static/images/2.jpg" alt=""></a></li>
<li><a href=""><img src="static/images/3.jpg" alt=""></a></li>
<li><a href=""><img src="static/images/4.jpg" alt=""></a></li>
<li><a href=""><img src="static/images/5.jpg" alt=""></a></li>
</ul>
</div>
<script>
function change(num){
var obj=document.getElementsByClassName('tab_img')[0];
var obj_li=obj.getElementsByTagName('a');
// document.getElementById('tab_list').getElementsByTagName('li')[num].style.background='#ccc';
for(var i=0;i<obj_li.length;i++){
obj_li[i].style.display='none';
}
obj_li[num].style.display='block';
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
