用CSS實現Tab頁切換效果

2022-08-05 18:09:13 字數 1178 閱讀 5847

最近切一個頁面的時候涉及到了一個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

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

演示地址

**:

用 CSS 實現的陰影效果

中文翻譯 onestab 2004 02 28 假如有一種技術,用 css 對任意塊級元素靈活地新增陰影,而且能隨著內容的大小自動擴充套件,...

用swiper實現類似淘搶購的滑動tab效果

en class timeaxis warp class timeaxis current class swiper container id swiper container3 class class swiper slide data num 0 class timeaxis item inne...

用CSS3偽類實現書籤效果

前兩天想給部落格上添個書籤效果,類似於下面這樣 在網上搜尋一番後,發現一篇純css書籤導航按鈕用三個div實現了這個效果。但是可沒有給我這麼...