純css tab選項卡程式碼例項
通常情況下,選項卡效果需要配合js才能夠實現,具體可以參閱javascript tab選項卡效果詳解一章節。
其實通過純css也是能夠實現的,下面就分享一段這樣的程式碼,並給出詳細的介紹。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline } ol,ul{ list-style:none } .container { position: relative; width: 400px; margin: 50px auto; } .nav { position: relative; overflow: hidden; } li { width: 200px; float: left; text-align: center; background: #ddd; } li a { display: block; width: 200px; line-height: 36px; font-size: 18px; cursor: pointer; text-decoration: none; color: #000; } #content1, #content2 { position: absolute; overflow: hidden; top: 36px; width: 400px; height: 100px; border: 1px solid #999; box-sizing: border-box; padding: 10px; background-color:white; } #content2 { display: none; width: 100%; } #content1:target, #content2:target { display: block; } .a { display:block; } #content1:target ~ .nav li { background: #ddd; color: #000; } #content1:target ~ .nav li:first-child { background: #ff7300; color: #fff; } #content2:target ~ .nav li { background: #ddd; color: #000; } #content2:target ~ .nav li:last-child { background: #ff7300; color: #fff; } .b { background: #ff7300; } </style> </head> <body> <div class="container"> <div id="content1" class="a">螞蟻部落一內容</div> <div id="content2">螞蟻部落二內容</div> <ul class='nav'> <li class="b"><a href="#content1">螞蟻部落一</a></li> <li><a href="#content2">螞蟻部落二</a></li> </ul> </div> </body> </html>
上面的選項卡是由純CSS實現,下面就介紹一下它的實現過程。
一.程式碼註釋:
程式碼的關鍵問題是如何實現感應點選事件,使用:target選擇器來實現此功能,此選擇器選取當前活動的目標元素(這個目標元素起始就是錨點定位的目標元素),程式碼如下:
[HTML] 純文字檢視 複製程式碼<li class="b"><a href="#content1">螞蟻部落一</a></li>
點選上面的連結,通過錨點定位是指向id屬性值為content1的元素,那麼通過下面css程式碼:
[CSS] 純文字檢視 複製程式碼#content1:target ~ .nav li { background: #ddd; color: #000; }
就可以匹配到id屬性值為content1的元素,進而設定兄弟元素中class屬性值為"nav"的元素下的li元素的樣式,這裡就是選項卡的樣式。
核心元素就是上面這些,更多的細節可以參閱相關閱讀。
二.相關閱讀:
(1).:target選擇器可以參閱CSS :target一章節。
(2).~選擇器可以參閱CSS (E~F)一章節。
(3).:first-child可以參閱CSS E:first-child一章節。
(4).:last-child可以參閱CSS E:last-child一章節。
相關文章
- 純css實現的tab選項卡程式碼例項CSS
- css3實現tab選項卡程式碼例項CSSS3
- jQuery tab選項卡效果程式碼例項jQuery
- 原生js tab選項卡程式碼例項JS
- tab選項卡切換例項程式碼
- 純css實現tab選項卡效果CSS
- jQuery實現的tab選項卡程式碼例項jQuery
- 物件導向實現的tab選項卡效果程式碼例項物件
- jQuery選項卡例項程式碼jQuery
- jQuery tab選項卡程式碼詳解jQuery
- javascript tab選項卡JavaScript
- js選項卡簡單程式碼例項JS
- 純CSS的導航欄Tab切換例項CSS
- JavaScript tab選項卡效果JavaScript
- JavaScript tab選項卡功能JavaScript
- JavaScript多級選項卡效果程式碼例項JavaScript
- bootstrap原始碼分析之tab(選項卡)boot原始碼
- CSS3 tab選項卡動態切換CSSS3
- 純css實現點選連結無效程式碼例項CSS
- js左右滑動選項卡效果程式碼例項JS
- jquery實現的選項卡效果例項程式碼jQuery
- layui豎版tab選項卡UI
- jquery tab選項卡詳解jQuery
- 純CSS實現的二級下拉選單效果程式碼例項CSS
- jquery.idTabs.min.js選項卡程式碼例項jQueryJS
- jQuery選項卡切換圖片效果程式碼例項jQuery
- js實現的垂直選項卡效果程式碼例項JS
- JavaScript禁用tab鍵程式碼例項JavaScript
- 基於swiper的Tab選項卡
- 利用jQuery實現Tab選項卡jQuery
- javascript tab選項卡效果詳解JavaScript
- 純CSS實現的二級導航選單效果程式碼例項CSS
- 微信小程式的tab選項卡的實現微信小程式
- js實現的可以通用的選項卡程式碼例項JS
- jquery.idTabs實現的選項卡程式碼例項jQuery
- jQuery實現的選項卡的巢狀程式碼例項jQuery巢狀
- 滑鼠虛滑過選項卡切換效果程式碼例項
- js如何禁用tab鍵例項程式碼JS