欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用CSS實(shí)現(xiàn)Tab頁切換效果的示例代碼

  發(fā)布時(shí)間：2018-03-19 15:43:20   作者：CodeDeer   我要評(píng)論
這篇文章主要介紹了用CSS實(shí)現(xiàn)Tab頁切換效果的示例代碼的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

最近切一個(gè)頁面的時(shí)候涉及到了一個(gè)tab切換的部分，因?yàn)椴幌胗胘s想著能不能用純CSS的選擇器來實(shí)現(xiàn)切換效果。搜了一下大致有下面三種寫法。

1、利用 :hover 選擇器

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

2、利用 a標(biāo)簽的錨點(diǎn) + :target選擇器

缺點(diǎn)：因?yàn)殄^點(diǎn)會(huì)將選中的元素滾動(dòng)到頁面最上面，每次切換位置都要移動(dòng)，體驗(yàn)極差。

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

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

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

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

  1. 綁定label和radio：這個(gè)不用說id和for屬性綁定
  2. 隱藏radio按鈕：這個(gè)方法有很多充分發(fā)揮你們的想象力就可以了，我見過的方法有設(shè)置 display:none; 隱藏的、設(shè)置 絕對(duì)定位，將left設(shè)置為很大的負(fù)值 ，移動(dòng)到頁面外達(dá)到隱藏效果、設(shè)置**絕對(duì)定位：使元素脫離文檔流，然后 opacity: 0; **設(shè)置為透明來達(dá)到隱藏效果。
  3. 隱藏多余的tab頁：和上面同理，還可以通過 z-index 設(shè)置層級(jí)關(guān)系來相互遮擋。
  4. 設(shè)置默認(rèn)項(xiàng)：在默認(rèn)按鈕上添加 checked="checked" 屬性
  5. 設(shè)置選中效果：利用 + 選擇器 和 ~ 選擇器來設(shè)置選中對(duì)應(yīng)元素時(shí)下方的tab頁的樣式，來達(dá)到選中的效果
/* 當(dāng)radio為選中狀態(tài)時(shí)設(shè)置它的test-label兄弟元素的屬性 */
input[type="radio"]:checked+.test-label {
    /* 為了修飾存在的邊框背景屬性 */
    border-color: #cbcccc;
    border-bottom-color: #fff;
    background: #fff;
    /* 為了修飾存在的層級(jí)使下邊框遮擋下方div的上邊框 */
    z-index: 10;
}
/* 當(dāng)radio為選中狀態(tài)時(shí)設(shè)置與它同級(jí)的tab-box元素的顯示層級(jí) */
input[type="radio"]:checked~.tab-box {
    /* 選中時(shí)提升層級(jí)，遮擋其他tab頁達(dá)到選中切換的效果 */
    z-index: 5;
}

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

演示地址

代碼：

<!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實(shí)現(xiàn)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 {
            /* 設(shè)置絕對(duì)定位方便定位相對(duì)于tab-list欄的位置，同時(shí)為了可以使用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;
            /* 設(shè)置層級(jí)最低方便選中狀態(tài)遮擋 */
            z-index: 0;
        }
        /* 用絕對(duì)定位使按鈕脫離文檔流，透明度設(shè)置為0將其隱藏 */
        input[type="radio"] {
            position: absolute;
            opacity: 0;
        }
        /* 利用選擇器實(shí)現(xiàn)  tab切換 */

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

</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論