欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

純CSS實現Tab頁切換效果的方法

小編給大家分享一下純CSS實現Tab頁切換效果的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)是專業(yè)的阿爾山網站建設公司，阿爾山接單;提供成都網站建設、做網站,網頁設計,網站設計,建網站,PHP網站建設等專業(yè)做網站服務;采用PHP框架,可快速的進行阿爾山網站開發(fā)網頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網站,專業(yè)的做網站團隊,希望更多企業(yè)前來合作!

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

1、利用 :hover 選擇器

缺點：只有鼠標在元素上面的時候才有效果，無法實現選中和默認顯示某一個的效果

2、利用 a標簽的錨點 + :target選擇器

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

3、利用 label和radio 的綁定關系和 radio選中時的:checked 來實現效果

缺點：HTML結構元素更復雜

純CSS實現Tab頁切換效果的方法

經過實驗發(fā)現第三種方法達到的效果最好。所以下面講一下第三種實現的方法。

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

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

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

  3. 隱藏多余的tab頁：和上面同理，還可以通過 z-index 設置層級關系來相互遮擋。

  4. 設置默認項：在默認按鈕上添加 checked="checked" 屬性

  5. 設置選中效果：利用 + 選擇器 和 ~ 選擇器來設置選中對應元素時下方的tab頁的樣式，來達到選中的效果

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

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

演示地址

代碼：

<!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;
            /* 設置層級最低方便選中狀態(tài)遮擋 */
            z-index: 0;
        }
        /* 用絕對定位使按鈕脫離文檔流，透明度設置為0將其隱藏 */
        input[type="radio"] {
            position: absolute;
            opacity: 0;
        }
        /* 利用選擇器實現  tab切換 */
        /* 當radio為選中狀態(tài)時設置它的test-label兄弟元素的屬性 */
        input[type="radio"]:checked + .test-label {
            /* 為了修飾存在的邊框背景屬性 */
            border-color: #cbcccc;
            border-bottom-color: #fff;
            background: #fff;
            /* 為了修飾存在的層級使下邊框遮擋下方p的上邊框 */
            z-index: 10;
        }
        /* 當radio為選中狀態(tài)時設置與它同級的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>
            <p class="tab-box">
                111111111111
            </p>
        </li>
        <li class="tab-itom">
            <input type="radio" id="testTabRadio2" class="test-radio" name="tab">
            <label class="test-label" for="testTabRadio2">選項卡二</label>
            <p class="tab-box">
                2222222222222
            </p>
        </li>
        <li class="tab-itom">
            <input type="radio" id="testTabRadio3" class="test-radio" name="tab">
            <label class="test-label" for="testTabRadio3">選項卡三</label>
            <p class="tab-box">
                33333333333333
            </p>
        </li>
    </ul>
</body>
</html>

看完了這篇文章，相信你對純CSS實現Tab頁切換效果的方法有了一定的了解，想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網站欄目：純CSS實現Tab頁切換效果的方法
分享路徑：http://www.chinadenli.net/article2/gepcoc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、虛擬主機、軟件開發(fā)、網站設計、響應式網站、網站維護

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都網站建設