js练习----tab标签栏切换

时间 2019-11-11

标签练习 tab 标签切换栏目 JavaScript 繁體版

原文原文链接

js效果为鼠标移到不一样标签显示对应的divjavascript

**js思路：css

　1.经过id或者getElementsByTagName或者其余方式找到各个标签，这里分别为服装，家电，饮食，娱乐标签html

　　　　　*　经过循环给每个标签注册鼠标事件，而且给每个标签设定一个属性，给出属性值，这是为了与下面的div相对应，在下面的div中经过获取设定的属性值就能够与相应表亲对应java

　　　　　*　鼠标事件的内容：给每个标签注册事件时，先使包括这个标签在内的各个标签背景为空，再给当前执行事件的标签一个不一样的背景this

2.经过id或者其余方式获标签下面的div（这个步骤在鼠标事件内进行）spa

　　　　* 在上一步给执行事件的标签不一样背景后，经过getAttribute得到以前设定的属性值code

　　　　* 再遍历每个div,遍历时先让每个div隐藏，再让下标玉得到的属性值相同的div显示htm

**完整代码：blog

<!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>