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標簽欄切換