用CSS實現(xiàn)Tab頁切換效果

dayday_up 發(fā)布于2019-08-30 14:10 / 670人閱讀

摘要：綁定和這個不用說和屬性綁定隱藏按鈕這個方法有很多充分發(fā)揮你們的想象力就可以了，我見過的方法有設(shè)置隱藏的設(shè)置絕對定位，將設(shè)置為很大的負(fù)值，移動到頁面外達(dá)到隱藏效果設(shè)置絕對定位使元素脫離文檔流，然后設(shè)置為透明來達(dá)到隱藏效果。

用CSS實現(xiàn)Tab切換效果

最近切一個頁面的時候涉及到了一個tab切換的部分，因為不想用js想著能不能用純CSS的選擇器來實現(xiàn)切換效果。搜了一下大致有下面三種寫法。

利用:hover選擇器

缺點：只有鼠標(biāo)在元素上面的時候才有效果，無法實現(xiàn)選中和默認(rèn)顯示某一個的效果

利用a標(biāo)簽的錨點 + :target選擇器

缺點：因為錨點會將選中的元素滾動到頁面最上面，每次切換位置都要移動，體驗極差。

利用label和radio的綁定關(guān)系和radio選中時的:checked來實現(xiàn)效果

缺點：HTML結(jié)構(gòu)元素更復(fù)雜

經(jīng)過實驗發(fā)現(xiàn)第三種方法達(dá)到的效果最好。所以下面講一下第三種實現(xiàn)的方法。

這種方法的寫法不固定，我查資料的時候各種各樣的寫法都有一度讓我一頭霧水的。最后看完發(fā)現(xiàn)總體思路都是一樣的，無非就是下面的幾個步驟。

綁定label和radio：這個不用說id和for屬性綁定

隱藏radio按鈕：這個方法有很多充分發(fā)揮你們的想象力就可以了，我見過的方法有設(shè)置display:none;隱藏的、設(shè)置絕對定位，將left設(shè)置為很大的負(fù)值，移動到頁面外達(dá)到隱藏效果、設(shè)置絕對定位：使元素脫離文檔流，然后opacity: 0;設(shè)置為透明來達(dá)到隱藏效果。

隱藏多余的tab頁：和上面同理，還可以通過z-index設(shè)置層級關(guān)系來相互遮擋。

設(shè)置默認(rèn)項：在默認(rèn)按鈕上添加checked="checked"屬性

設(shè)置選中效果：利用+選擇器和 ~選擇器來設(shè)置選中對應(yīng)元素時下方的tab頁的樣式，來達(dá)到選中的效果

/* 當(dāng)radio為選中狀態(tài)時設(shè)置它的test-label兄弟元素的屬性 */
input[type="radio"]:checked+.test-label {
    /* 為了修飾存在的邊框背景屬性 */
    border-color: #cbcccc;
    border-bottom-color: #fff;
    background: #fff;
    /* 為了修飾存在的層級使下邊框遮擋下方div的上邊框 */
    z-index: 10;
}
/* 當(dāng)radio為選中狀態(tài)時設(shè)置與它同級的tab-box元素的顯示層級 */
input[type="radio"]:checked~.tab-box {
    /* 選中時提升層級，遮擋其他tab頁達(dá)到選中切換的效果 */
    z-index: 5;
}

這樣就可以實現(xiàn)一個Tab頁切換的效果了，不用一點兒js，當(dāng)然肯定也有兼容性的問題。實際操作中tab頁還是使用js比較好。下面是小Demo的代碼，樣式比較多主要是為了實現(xiàn)各種選中效果，真正用來達(dá)到選擇切換目地的核心代碼就幾行

演示地址

代碼：





    
    
    
    CSS實現(xiàn)Tab切換效果
    



    
        
            
            選項卡一
            
                111111111111
            
        
        
            
            選項卡二
            
                2222222222222
            
        
        
            
            選項卡三
            
                33333333333333