tab栏切换 – js案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tab{
width: 600px;
height: 50px;
color: #000;
margin: 100px auto;
background-color: pink;
padding-left: 20px;
}
.tab li{
list-style: none;
float: left;
margin-right: 20px;
height: 50px;
line-height: 50px;
text-align: center;
}
li:hover{
background-color: #f40;
color: #fff;
}
.content{
position: relative;
left: -20px;
width: 618px;
height: 250px;
display: inline-block;
border: 1px solid black;
}
.content .demo{
display: none;
}
</style>
</head>
<body>
<div class="tab">
<li class="select">商品介绍</li>
<li class="select">规格与包装</li>
<li class="select">售后保障</li>
<li class="select">商品评价(5000)</li>
<li class="select">手机社区</li>
<div class="content">
<div class="demo" style="display: block;">商品介绍模块</div>//把一开始要展现出来的模块展示出来
<div class="demo">规格与包装模块</div>
<div class="demo">售后保障模块</div>
<div class="demo">商品介绍模块</div>
<div class="demo">手机社区模块</div>
</div>
</div>
<script>
var demos = document.getElementsByClassName('demo');
var lis = document.getElementsByClassName('select');
for(var i = 0;i<demos.length;i++)
{
//利用立即执行函数防止变量变换而导致达不到效果
(function(n){
lis[n].onmousemove = function(){
//排他思想 先干掉其他 再绑定触发事件的元素
for(var j = 0;j<demos.length;j++)
{
demos[j].style.display = 'none';
}
demos[n].style.display = 'block';
}
}(i))
}
</script>
</body>
</html>