tab切換在各大主流頁面有廣泛的應用,今天來分享一個用原生js來實現類似京東購物邊欄的TAB.
首先以下是一段邊欄HTML框架代碼
<body>
<div class="wrap">
<div id="left">
<ul id="leftList">
<li>家電</li>
<li>手機</li>
<li>男裝</li>
<li>女裝</li>
<li>吃的</li>
</ul>
</div>
<div id="right">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</div>
</div>
</body>
然后是css樣式代碼
<style type="text/css">
ul {
margin: 0;
padding: 0;
}
.wrap {
width: 1000px;
height: 252px;
overflow: hidden;
}
#left {
width: 200px;
height: 100%;
background-color: red;
border: 1px solid red;
box-sizing: border-box;
float: left;
}
#right {
width: 800px;
height: 100%;
background-color: yellow;
border: 1px solid red;
border-left-style: none;
float: right;
box-sizing: border-box;
display: none;
}
#leftList {
list-style: none;
}
li {
width: 100%;
height: 50px;
background-color: red;
color: white;
text-indent: 2em;
line-height: 50px;
}
.current {
background-color: white;
color: red;
border-right-style: none;
border-left: 1px solid red;
}
#right div {
width: 100%;
height: 100%;
background-color: #CCCCCC;
text-align: center;
font-size: 100px;
display: none;
}
.show {
display: block;
}
</style>
此時效果如下
此處要注意一下 因為當你的鼠標沒有移到左側時,他不會激發對應的內容,所以css樣式部分
#right置為none.下面重點到了js部分,首先我們分析一下邏輯順序,如要實現效果應該有以下幾個方面
- 鼠標移到左側div時彈出對應的右側內容
- 鼠標從左側移出到右側后,右側內容不消失
- 鼠標移出左右側后右側內容消失
然后我們根據js語句主要的三部分(獲取變量.操作.定義函數)來寫js部分
首先定義變量,即
/***** 變量 *****/
var leftDiv = document.getElementById("left");
var rightDiv = document.getElementById("right");
// 獲取左側列表
var lis = document.getElementsByTagName("li");
var divs = document.querySelectorAll("#right>div");
// 臨時變量 保存定時器(負責清除)
var timer = null;
此處需要強調因為要有一個延時的效果,我們定義了一個定時器,即變量中的
var timer = null;
然后進行操作
/***** 操作 *****/
// tab切換
for (var i = 0; i < lis.length; i++) {
lis[i].biaoji = i;
lis[i].onmouseover = function() {
for (var j = 0; j < divs.length; j++) {
lis[j].className = "";
divs[j].style.display = "none";
}
this.className = "current";
divs[this.biaoji].style.display = "block";
}
}
leftDiv.onmouseover = function() {
// 鼠標停留在左div時 干掉定時器
clearInterval(timer);
rightDiv.style.display = "block";
}
leftDiv.onmouseout = function() {
// 當鼠標離開左div時 創建定時器 0.5s后清空樣式
timer = setTimeout(function() {
rightDiv.style.display = "none";
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
}, 500);
}
rightDiv.onmouseover = function() {
// 利用時間差 當鼠標從左div 移入右div時
// 先干掉定時器 保留剛才的效果
clearTimeout(timer);
this.style.display = "block";
}
rightDiv.onmouseout = function() {
// 當鼠標從右側div離開時 清除樣式
timer = setTimeout(function() {
rightDiv.style.display = "none";
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
}, 500);
}
如果要實現更多個對象的處理為了代碼簡潔我們可以把其中相同的部分提出來封裝成函數使用時再調用就可以了.
實現效果如下
