js练习----tab标签栏切换
Posted ayayi-666
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js练习----tab标签栏切换相关的知识，希望对你有一定的参考价值。
js效果为鼠标移到不同标签显示对应的div
**js思路：
1.通过id或者getElementsByTagName或者其他方式找到各个标签，这里分别为 服装，家电，饮食，娱乐标签
* 通过循环给每一个标签注册鼠标事件，并且给每一个标签设定一个属性，给出属性值，这是为了与下面的div相对应，在下面的div中通过获取设定的属性值就可以与相应表亲对应
* 鼠标事件的内容：给每一个标签注册事件时，先使包括这个标签在内的各个标签背景为空，再给当前执行事件的标签一个不同的背景
2.通过id或者其他方式获标签下面的div（这个步骤在鼠标事件内进行）
* 在上一步给执行事件的标签不同背景后，通过getAttribute获得之前设定的属性值
* 再遍历每一个div,遍历时先让每一个div隐藏，再让下标玉获得的属性值相同的div显示
**完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style type="text/css">
*{
margin:auto auto;
}
.bd{
margin-top: 100px;
width:200px;
height:30px;
}
.bd span{
background: #eee;
margin-left: 1px;
display: block;
float:left;
font-size: 16px;
display: block;
padding:5px;
border-radius: 6px;
}
.bg{
background:#e87c3b;
}
.hd{
width:200px;
height:80px;
margin-top:10px;
position: relative;
}
.sjx{
width: 0px;
height: 0px;
border-top: 5px solid #fff;
border-right: 5px solid #fff;
border-left:5px solid #fff;
border-bottom: 10px solid #e87c3b;
position: absolute;
top:-100%;
}
.hd div{
width:200px;
height:auto;
background: #e87c3b;
padding-bottom: 20px;
}
.show{
display: block;
}
.hidden{
display: none;
}
ul,li{
list-style: none;
}
ul{
margin:0;
padding:10px;
}
</style>
</head>
<body>
<div class="bd" id="d">
<span>服装</span>
<span>家电</span>
<span>饮食</span>
<span>娱乐</span>
</div>
<div class="hd" id="hd">
<div style="display: block;">
<ul>
<li>上衣</li>
<li>下装</li>
<li>裤装</li>
<li>连衣裙</li>
</ul>
</div>
<div style="display: none;padding-bottom: 20px;">
<ul>
<li>电视机</li>
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
<li>吸尘器</li>
</ul>
</div>
<div style="display: none;">
<ul>
<li>蔬菜</li>
<li>水果</li>
</ul>
</div>
<div style="display: none;">娱乐模块</div>
</div>
<div class="sjx"></div>
<script type="text/javascript">
var spans=document.getElementsByTagName("span");
var len=spans.length;
for(var i=0;i<len;i++){
var span=spans[i];
span.setAttribute(‘index‘,i);
span.onmouseover=function(){
for(var j=0;j<len;j++){
spans[j].style.background=‘‘;
}
this.style.background=‘ #e87c3b‘;
var index=parseInt(this.getAttribute(‘index‘));
var divs=document.querySelectorAll(‘#hd div‘);
var divlen=divs.length;
for(var x=0;x<divlen;x++){
divs[x].style.display="none";
}
divs[index].style.display=‘block‘;
};
}
</script>
</body>
</html>
以上是关于js练习----tab标签栏切换的主要内容，如果未能解决你的问题，请参考以下文章