最近切乙個頁面的時候涉及到了乙個tab切換的部分，因為不想用js想著能不能用純css的選擇器來實現切換效果。搜了一下大致有下面三種寫法。
利用:hover選擇器
利用a標籤的錨點 + :target選擇器
利用label和radio的繫結關係和radio選中時的:checked來實現效果
經過實驗發現第三種方法達到的效果最好。所以下面講一下第三種實現的方法。
這種方法的寫法不固定，我查資料的時候各種各樣的寫法都有一度讓我一頭霧水的。最後看完發現總體思路都是一樣的，無非就是下面的幾個步驟。
繫結label和radio：這個不用說id和for屬性繫結
隱藏radio按鈕：這個方法有很多充分發揮你們的想象力就可以了，我見過的方法有設定display:none;隱藏的、設定絕對定位，將left設定為很大的負值，移動到頁面外達到隱藏效果、設定絕對定位：使元素脫離文件流，然後opacity: 0;設定為透明來達到隱藏效果。
隱藏多餘的tab頁：和上面同理，還可以通過z-index設定層級關係來相互遮擋。
設定預設項：在預設按鈕上新增checked="checked"屬性
設定選中效果：利用+選擇器 和~選擇器來設定選中對應元素時下方的tab頁的樣式，來達到選中的效果
/* 當radio為選中狀態時設定它的test-label兄弟元素的屬性 */
input[type="radio"]:checked+.test-label
/* 當radio為選中狀態時設定與它同級的tab-box元素的顯示層級 */
input[type="radio"]:checked~.tab-box
演示位址
**：
CSS實現tab頁切換效果
tab也切換在前端頁面中是非常常見的一種效果。本人通過蒐集資料大致實現有有下面三種寫法。利用 hover選擇器 利用a標籤的錨點 target選擇器 利用label和radio的繫結關係和radio選中時的 checked來實現效果 只要指定label的 for 屬性到radio的id就行，或者用l...
tab切換效果
今天上一套tab切換效果的 就自己實現吧！下面貼html 大體分兩部分，div和按鈕div，很容易看懂 123 45這個還是比較簡單的div結構，下面是對應的css button btn p main pictures 對所有div的簡單布局，最後主要實現功能 所以重要的js 如下 window.o...
純css實現tab切換
所用技術有 css選擇器 相鄰兄弟選擇器 element element 用於選取第乙個指定的元素之後的緊跟的元素，該元素是被選取元素的兄弟 不是內部 element1 element2 它可以element1之後所有的element2 兩元素必須擁有相同父元素，但是element2不必直接緊隨el...