如何實現選項卡切換

ZoeeeZhang發表於2018-01-02

問題

利用原生js實現選項卡切換效果，如下：

如何實現選項卡切換

解題思路

  1. 打好html框架，即選項卡標題（ul…li…）及內容(div…)；
  2. 樣式設定，預設顯示第一個選項卡標題及內容，顯示樣式為，選中li的上邊框變紅，下邊框消失。解決思路是設定ul下邊框為紅色，為li新增類"active"，上邊框為紅色，下邊框為白色，此時li下邊框就會覆蓋ul下邊框，如上圖所示。此處需計算li及ul盒模型高度，保持兩者一致。
  3. 補充js部分程式碼，實現點選標題頁切換對應內容頁等效果。解題思路，為每一個li新增滑鼠移過事件 ，遍歷li，為其移除"active"類，併為當前li新增"active"， this.classList.add("active")。同時，遍歷div內容，全部隱藏，併為當前div移除隱藏classList.remove("hide")，顯示對應內容頁。

body部分程式碼

<!-- HTML頁面佈局 -->
<ul class="list" id='nav'>
    <li class="active">房產</li>
    <li class="">家居</li>
    <li class="">二手房</li>
</ul>

<div class="all " id='content'>
    <div class="">
        275萬購昌平鄰鐵三居 總價20萬買一居
        <br> 200萬內購五環三居 140萬安家東三環
        <br> 北京首現零首付樓盤 53萬購東5環50平
        <br> 京樓盤直降5000 中信府 公園樓王現房
        <br>
    </div>

    <div class="hide ">
        40平出租屋大改造 美少女的混搭小窩
        <br> 經典清新簡歐愛家 90平老房煥發新生
        <br> 新中式的酷色溫情 66平撞色活潑家居
        <br> 瓷磚就像選好老婆 衛生間煙道的設計
        <br>
    </div>

    <div class="hide ">
        通州豪華3居260萬 二環稀缺2居250w甩
        <br> 西3環通透2居290萬 130萬2居限量搶購
        <br> 黃城根小學學區僅260萬 121平70萬拋!
        <br> 獨家別墅280萬 蘇州橋2居優惠價248萬
        <br>
    </div>
</div>
複製程式碼

CSS部分程式碼

* {
    padding: 0;
    font-size: 13px;
    width: 230px;
    margin: 0 auto;
    font: normal 12px "微軟雅黑";
}

.hide {
    display: none;
    /*預設隱藏後兩個標籤頁 */
}

li {
    display: inline-block;
    /*轉換為內聯塊狀元素，並排展示li內容 */
    border: 1px solid #ccc;
    width: 50px;
    height: 22px;
    border-bottom: none;
    margin-left: 5px;
}

ul {
    list-style: none;
    /*去除li預設小黑點 */
    margin-top: 2px;

    width: 232px;
    height: 24px;
    border-bottom: 2px solid #8a0f0f;
}

.all {
    border: 1px solid rgb(75, 68, 68);
    width: 230px;
    border-top: none;
}

.active {
    border-top: 2px solid #8B4513;
    border-bottom: 2px solid #FFFFFF;
    /*預設顯示第一個標題頁的效果*/
}
複製程式碼

CSS難點：盒模型高度計算

保持ul和li高度一致，以免出現如標題下邊框沒有完全覆蓋內容頁等情況，影響美觀，反例如下：

如何實現選項卡切換

解決方法：利用瀏覽器盒模型直觀計算比對。

li.active:

如何實現選項卡切換

ul:

如何實現選項卡切換

2+22+2=24+2，這樣邊框就能正確覆蓋了。

JS部分程式碼

// JS實現選項卡切換
window.onload = function () {
//先載入頁面，否則函式無效
    change('nav', 'content');
}
// 當頁面需要多次實現選項卡效果，可以對函式進行封裝，以實現多次呼叫。
function change(navId, contentId) {
    // 切換程式碼
    var nav = document.getElementById(navId);
    var liarray = nav.children;
    var content = document.getElementById(contentId);
    var contentarray = content.children;
    for (var i = 0; i < liarray.length; i++) {
        liarray[i].index = i;
        liarray[i].onmouseover = function () {
        //為每一個li新增滑鼠移過事件
            for (var j = 0; j < liarray.length; j++) {
                liarray[j].classList.remove("active");
                //遍歷liarray，全部刪除"active"類
            }
            this.classList.add("active");
            //為當前li新增"active"類
            for (var j = 0; j < contentarray.length; j++) {
                if (!contentarray[j].classList.contains("hide")) {
                    contentarray[j].classList.add("hide")
                }
            }
            contentarray[this.index].classList.remove("hide");
        }
    }
}
複製程式碼

JS難點

  1. 如何得到和選項卡標題相匹配的內容頁： 方法：自定義屬性"index"，實現對映
  2. Active 和 remove hide 效果同時實現，注意程式碼位置

相關文章