用CSS實現Tab頁切換效果

用CSS實現Tab切換效果

最近切一個頁面的時候涉及到了一個tab切換的部分,由於不想用js想着能不能用純CSS的選擇器來實現切換效果。搜了一下大體有下面三種寫法。css

  1. 利用:hover選擇器html

    • 缺點:只有鼠標在元素上面的時候纔有效果,沒法實現選中和默認顯示某一個的效果
  2. 利用a標籤的錨點 + :target選擇器git

    • 缺點:由於錨點會將選中的元素滾動到頁面最上面,每次切換位置都要移動,體驗極差。
  3. 利用label和radio的綁定關係和radio選中時的:checked來實現效果github

    • 缺點:HTML結構元素更復雜

tab.gif

通過實驗發現第三種方法達到的效果最好。因此下面講一下第三種實現的方法。ui

這種方法的寫法不固定,我查資料的時候各類各樣的寫法都有一度讓我一頭霧水的。最後看完發現整體思路都是同樣的,無非就是下面的幾個步驟。spa

  1. 綁定label和radio:這個不用說id和for屬性綁定
  2. 隱藏radio按鈕:這個方法有不少充分發揮大家的想象力就能夠了,我見過的方法有設置display:none;隱藏的、設置絕對定位,將left設置爲很大的負值,移動到頁面外達到隱藏效果、設置絕對定位:使元素脫離文檔流,而後opacity: 0;設置爲透明來達到隱藏效果。
  3. 隱藏多餘的tab頁:和上面同理,還能夠經過z-index設置層級關係來相互遮擋。
  4. 設置默認項:在默認按鈕上添加checked="checked"屬性
  5. 設置選中效果:利用+選擇器 和 ~選擇器來設置選中對應元素時下方的tab頁的樣式,來達到選中的效果code

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

這樣就能夠實現一個Tab頁切換的效果了,不用一點兒js,固然確定也有兼容性的問題。實際操做中tab頁仍是使用js比較好。下面是小Demo的代碼,樣式比較多主要是爲了實現各類選中效果,真正用來達到選擇切換目地的核心代碼就幾行htm

演示地址ci

代碼:rem

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS實現Tab切換效果</title>
    <style>
        ul {
            margin: 0;
            padding: 0;

        }
        .clearfloat {
            zoom: 1;
        }
        .clearfloat::after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0;
        }

        .tab-list {
            position: relative;
        }

        .tab-list .tab-itom {
            float: left;
            list-style: none;
            margin-right: 4px;
        }

        .tab-itom .test-label {
            position: relative;
            display: block;
            width: 85px;
            height: 27px;
            border: 1px solid transparent;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            line-height: 27px;
            text-align: center;
            background: #e7e8eb;
        }

        .tab-itom .tab-box {
            /* 設置絕對定位方便定位相對於tab-list欄的位置,同時爲了可使用z-index屬性 */
            position: absolute;
            left: 0;
            top: 28px;
            width: 488px;
            height: 248px;
            border: 1px solid #cbcccc;
            border-radius: 5px;
            border-top-left-radius: 0px;
            background: #fff;
            /* 設置層級最低方便選中狀態遮擋 */
            z-index: 0;
        }
        /* 用絕對定位使按鈕脫離文檔流,透明度設置爲0將其隱藏 */
        input[type="radio"] {
            position: absolute;
            opacity: 0;
        }
        /* 利用選擇器實現  tab切換 */

        /* 當radio爲選中狀態時設置它的test-label兄弟元素的屬性 */
        input[type="radio"]:checked + .test-label {
            /* 爲了修飾存在的邊框背景屬性 */
            border-color: #cbcccc;
            border-bottom-color: #fff;
            background: #fff;
            /* 爲了修飾存在的層級使下邊框遮擋下方div的上邊框 */
            z-index: 10;
        }
        /* 當radio爲選中狀態時設置與它同級的tab-box元素的顯示層級 */
        input[type="radio"]:checked ~ .tab-box {
            /* 選中時提高層級,遮擋其餘tab頁達到選中切換的效果 */
            z-index: 5;
        }
    </style>
</head>

<body class="clearfloat">
    <ul class="tab-list clearfloat">
        <li class="tab-itom">
            <input type="radio" id="testTabRadio1" class="test-radio" name="tab" checked="checked">
            <label class="test-label" for="testTabRadio1">選項卡一</label>
            <div class="tab-box">
                111111111111
            </div>
        </li>
        <li class="tab-itom">
            <input type="radio" id="testTabRadio2" class="test-radio" name="tab">
            <label class="test-label" for="testTabRadio2">選項卡二</label>
            <div class="tab-box">
                2222222222222
            </div>
        </li>
        <li class="tab-itom">
            <input type="radio" id="testTabRadio3" class="test-radio" name="tab">
            <label class="test-label" for="testTabRadio3">選項卡三</label>
            <div class="tab-box">
                33333333333333
            </div>
        </li>
    </ul>
</body>

</html>
相關文章
相關標籤/搜索