如何用原生javascript實現TAB切換

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);
        }

如果要實現更多個對象的處理為了代碼簡潔我們可以把其中相同的部分提出來封裝成函數使用時再調用就可以了.
實現效果如下


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • tab切換在各大主流頁面有廣泛的應用,今天來分享一個用原生js來實現類似京東購物邊欄的TAB. 首先以下是一段邊欄...
    lucifrom_long閱讀 344評論 0 1
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,099評論 25 708
  • 圣誕節如愿聽了人生第一場劉若英的演唱會。聽到某首歌的時候,忍不住哭了,而且是淚流滿面。是的,就是那首劉若英已經唱吐...
    陳2妹閱讀 141評論 0 0
  • 來自遙遠的問候, 飄向遠方的你, 我在黃土高原的一偶, 默默的祝福著遠方的你, 你可曾聽到,我親愛的你。 你可曾記...
    就愛嗑瓜子閱讀 142評論 1 0