用CSS實現(xiàn)Tab頁切換效果的示例代碼
發(fā)布時間：2018-03-19 15:43:20 作者：CodeDeer 
我要評論
我要評論這篇文章主要介紹了用CSS實現(xiàn)Tab頁切換效果的示例代碼的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
最近切一個頁面的時候涉及到了一個tab切換的部分，因為不想用js想著能不能用純CSS的選擇器來實現(xiàn)切換效果。搜了一下大致有下面三種寫法。
1、利用 :hover 選擇器
缺點：只有鼠標在元素上面的時候才有效果，無法實現(xiàn)選中和默認顯示某一個的效果
2、利用 a標簽的錨點 + :target選擇器
缺點：因為錨點會將選中的元素滾動到頁面最上面，每次切換位置都要移動，體驗極差。
3、利用 label和radio 的綁定關(guān)系和 radio選中時的:checked 來實現(xiàn)效果
缺點：HTML結(jié)構(gòu)元素更復雜
經(jīng)過實驗發(fā)現(xiàn)第三種方法達到的效果最好。所以下面講一下第三種實現(xiàn)的方法。
這種方法的寫法不固定，我查資料的時候各種各樣的寫法都有一度讓我一頭霧水的。最后看完發(fā)現(xiàn)總體思路都是一樣的，無非就是下面的幾個步驟。
- 綁定label和radio：這個不用說id和for屬性綁定
- 隱藏radio按鈕：這個方法有很多充分發(fā)揮你們的想象力就可以了，我見過的方法有設置 display:none; 隱藏的、設置 絕對定位，將left設置為很大的負值 ，移動到頁面外達到隱藏效果、設置**絕對定位：使元素脫離文檔流，然后 opacity: 0; **設置為透明來達到隱藏效果。
- 隱藏多余的tab頁：和上面同理，還可以通過 z-index 設置層級關(guān)系來相互遮擋。
- 設置默認項：在默認按鈕上添加 checked="checked" 屬性
- 設置選中效果：利用 + 選擇器 和 ~ 選擇器來設置選中對應元素時下方的tab頁的樣式，來達到選中的效果
/* 當radio為選中狀態(tài)時設置它的test-label兄弟元素的屬性 */
input[type="radio"]:checked+.test-label {
/* 為了修飾存在的邊框背景屬性 */
border-color: #cbcccc;
border-bottom-color: #fff;
background: #fff;
/* 為了修飾存在的層級使下邊框遮擋下方div的上邊框 */
z-index: 10;
}
/* 當radio為選中狀態(tài)時設置與它同級的tab-box元素的顯示層級 */
input[type="radio"]:checked~.tab-box {
/* 選中時提升層級，遮擋其他tab頁達到選中切換的效果 */
z-index: 5;
}
這樣就可以實現(xiàn)一個Tab頁切換的效果了，不用一點兒js，當然肯定也有兼容性的問題。實際操作中tab頁還是使用js比較好。下面是小Demo的代碼，樣式比較多主要是為了實現(xiàn)各種選中效果， 真正用來達到選擇切換目地的核心代碼就幾行
代碼：
<!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實現(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 {
/* 設置絕對定位方便定位相對于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;
}
/* 利用選擇器實現(xiàn) tab切換 */
/* 當radio為選中狀態(tài)時設置它的test-label兄弟元素的屬性 */
input[type="radio"]:checked + .test-label {
/* 為了修飾存在的邊框背景屬性 */
border-color: #cbcccc;
border-bottom-color: #fff;
background: #fff;
/* 為了修飾存在的層級使下邊框遮擋下方div的上邊框 */
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>
<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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
怎樣實現(xiàn)H5+CSS3手指滑動切換圖片的示例代碼
這篇文章主要介紹了怎樣實現(xiàn)H5+CSS3手指滑動切換圖片的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小2019-05-05
本文通過實例代碼給大家介紹了css實現(xiàn)導航切換效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-08-15- 這篇文章主要介紹了CSS實現(xiàn)Tab頁切換實例代碼,需要的朋友可以參考下2018-01-31
CSS使用classList實現(xiàn)兩個按鈕樣式的切換
在一些頁面我們需要使用兩個按鈕來回切換，怎么實現(xiàn)這樣的功能呢？下面小編給大家?guī)砹薈SS使用classList實現(xiàn)兩個按鈕樣式的切換效果，需要的朋友跟隨腳本之家小編一起學習2018-01-24
這篇文章主要介紹了純CSS3制作頁面切換效果的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-05-30
