繼上一篇文章后，突發奇想利用純粹的css3和radio的特性來打造一個選項卡切換的效果

普通的選項卡效果一般分為html+css+js來制作

步驟如下：

html做布局

css做樣式

js添加切換效果

純css3怎么解決呢？

html利用radio放到label中，將其隱藏(display：none)，然后用input:checked~[label里的所要修飾的標簽]

css修飾相關樣式，利用radio特性寫樣式

就是這么屌，寫完了

選項卡功能就這么寫完了

好了，廢話不說，上代碼

html部分:

html

超級文本標記語言是標準通用標記語言下的一個應用，也是一種規范，一種標準，超文本標記語言超文本標記語言(16張)它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容(如：文字如何處理，畫面如何安排，圖片如何顯示等)。瀏覽器按順序閱讀網頁文件，然后根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果。

css

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。

js

JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML(標準通用標記語言下的一個應用)網頁上使用，用來給HTML網頁增加動態功能。

css部分:

*{margin:0;padding:0;}

body{background:#fff;font-size:16px;}

.clear{overflow:hidden;}

.fl{float:left;}

.fr{float:right;}

.text-center{text-align:center;}

.box{display:box;display:-webkit-box;}

.center{display:box;display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;}

input{display:none;}

.list{border-bottom:1px solid #1fa7e3;}

label{position:relative;width:1rem;display:block;height:40px;line-height:40px;}

label span{display:block;transition:.3s;-webkit-transition:.3s;box-shadow:inset 0 0 0 #1fa7e3;-webkit-box-shadow:inset 0 0 0 #1fa7e3;}

label p{width:2.8rem;padding:.1rem;font-size:14px;opacity:0;transition:.3s;-webkit-transition:.3s;line-height:20px;text-align:left;z-index:-1;visibility:hidden;position:absolute;left:0;top:40px;}

label:nth-child(2) p{left:-1rem;}

label:nth-child(3) p{left:-2rem;}

input:checked~p{opacity:1;visibility:visible;}

input:checked~span{opacity:1;color:#fff;box-shadow:inset 0 0 100px #1fa7e3;-webkit-box-shadow:inset 0 0 100px #1fa7e3;}

demo效果圖

demo效果圖

好了，沒有寫js的感覺是不是很爽！！！

歡迎大家對我的分享進行評論，指正

另，歡迎關注我的微信公眾號：峰來風趣 觀看更多精彩內容

總結

以上是生活随笔為你收集整理的在html中选项卡怎么做,纯css3制作选项卡的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。