tab切換在各大主流頁面有廣泛的應(yīng)用,今天來分享一個(gè)用原生js來實(shí)現(xiàn)類似京東購(gòu)物邊欄的TAB.
首先以下是一段邊欄HTML框架代碼
<pre><code>
<body>
<div class="wrap">
<div id="left">
<ul id="leftList">
<li>家電</li>
<li>手機(jī)</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>
</code></pre>
然后是css樣式代碼
<pre><code>
<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>
</code></pre>
此處要注意一下 因?yàn)楫?dāng)你的鼠標(biāo)沒有移到左側(cè)時(shí),他不會(huì)激發(fā)對(duì)應(yīng)的內(nèi)容,所以css樣式部分#right
置為none
.下面重點(diǎn)到了js部分,首先我們分析一下邏輯順序,如要實(shí)現(xiàn)效果應(yīng)該有以下幾個(gè)方面
鼠標(biāo)移到左側(cè)div時(shí)彈出對(duì)應(yīng)的右側(cè)內(nèi)容
鼠標(biāo)從左側(cè)移出到右側(cè)后,右側(cè)內(nèi)容不消失
鼠標(biāo)移出左右側(cè)后右側(cè)內(nèi)容消失
然后我們根據(jù)js語句主要的三部分(獲取變量.操作.定義函數(shù))來寫js部分首先定義變量,即
<pre><code>
/***** 變量 *****/ var leftDiv = document.getElementById("left"); var rightDiv = document.getElementById("right"); // 獲取左側(cè)列表 var lis = document.getElementsByTagName("li"); var divs = document.querySelectorAll("#right>div"); // 臨時(shí)變量 保存定時(shí)器(負(fù)責(zé)清除) var timer = null;
</code></pre>
然后進(jìn)行操作
<pre><code>
/***** 操作 *****/ // 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() { // 鼠標(biāo)停留在左div時(shí) 干掉定時(shí)器 clearInterval(timer); rightDiv.style.display = "block"; } leftDiv.onmouseout = function() { // 當(dāng)鼠標(biāo)離開左div時(shí) 創(chuàng)建定時(shí)器 0.5s后清空樣式 timer = setTimeout(function() { rightDiv.style.display = "none"; for (var i = 0; i < lis.length; i++) { lis[i].className = ""; } }, 500); } rightDiv.onmouseover = function() { // 利用時(shí)間差 當(dāng)鼠標(biāo)從左div 移入右div時(shí) // 先干掉定時(shí)器 保留剛才的效果 clearTimeout(timer); this.style.display = "block"; } rightDiv.onmouseout = function() { // 當(dāng)鼠標(biāo)從右側(cè)div離開時(shí) 清除樣式 timer = setTimeout(function() { rightDiv.style.display = "none"; for (var i = 0; i < lis.length; i++) { lis[i].className = ""; } }, 500); }
</pre></code>
如果要實(shí)現(xiàn)更多個(gè)對(duì)象的處理為了代碼簡(jiǎn)潔我們可以把其中相同的部分提出來封裝成函數(shù)使用時(shí)再調(diào)用就可以了.
