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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。