純css實現的tab選項卡程式碼例項
通常選項卡效果是由javascript實現的,具體可以參閱原生javascript實現的tab選項卡例項程式碼一章節。
下面分享一個使用純css實現的tab選項卡功能,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body{ margin:0; font-size:12px; background:#666; } #box{ width:400px; height:300px; margin:100px auto 0; } #tab_nav{ margin:0; padding:0; height:25px; line-height:24px; } #tab_nav li{ float:left; margin:0 3px; list-style:none; border:1px solid #999; border-bottom:none; height:24px; width:60px; text-align:center; background:#FFF; } a{ font:bold 14px/24px "微軟雅黑", Verdana, Arial, Helvetica, sans-serif; color:green; text-decoration:none; } a:hover{color:red;} #tab_content{ width:398px; height:273px; border:1px solid #999; font:bold 4em/273px "微軟雅黑", Verdana, Arial, Helvetica, sans-serif; text-align:center; background:#FFF; overflow:hidden; } #t_1,#t_2,#t_3{ width:100%; height:273px; } </style> </head> <body> <div id="box"> <ul id="tab_nav"> <li><a href="#t_1">tab_1</a></li> <li><a href="#t_2">tab_2</a></li> <li><a href="#t_3">tab_3</a></li> </ul> <div id="tab_content"> <div id="t_1">tab_壹</div> <div id="t_2">tab_貳</div> <div id="t_3">tab_叄</div> </div> </div> </body> </html>
這個實現的非常的巧妙,利用的是錨點定位的功能。讓父元素隱藏超出的尺寸,只保留當前錨點要顯示的區域即可。
相關文章
- 純css tab選項卡程式碼例項CSS
- css3實現tab選項卡程式碼例項CSSS3
- 純css實現tab選項卡效果CSS
- jQuery實現的tab選項卡程式碼例項jQuery
- 物件導向實現的tab選項卡效果程式碼例項物件
- jQuery tab選項卡效果程式碼例項jQuery
- 原生js tab選項卡程式碼例項JS
- tab選項卡切換例項程式碼
- jquery實現的選項卡效果例項程式碼jQuery
- 微信小程式的tab選項卡的實現微信小程式
- js實現的垂直選項卡效果程式碼例項JS
- 純css實現點選連結無效程式碼例項CSS
- 純CSS實現的二級下拉選單效果程式碼例項CSS
- js實現的可以通用的選項卡程式碼例項JS
- jQuery實現的選項卡的巢狀程式碼例項jQuery巢狀
- 利用jQuery實現Tab選項卡jQuery
- jquery.idTabs實現的選項卡程式碼例項jQuery
- 純CSS實現的二級導航選單效果程式碼例項CSS
- jQuery選項卡例項程式碼jQuery
- jQuery tab選項卡程式碼詳解jQuery
- jQuery如何實現tab選項卡效果jQuery
- css3實現的打折卡效果程式碼例項CSSS3
- 純CSS的導航欄Tab切換例項CSS
- javascript tab選項卡JavaScript
- 選項卡方式實現的多角色登陸表單程式碼例項
- js選項卡簡單程式碼例項JS
- Android Tab 選項卡的簡單實現薦Android
- css實現梯形程式碼例項CSS
- JavaScript tab選項卡效果JavaScript
- JavaScript tab選項卡功能JavaScript
- JavaScript多級選項卡效果程式碼例項JavaScript
- bootstrap原始碼分析之tab(選項卡)boot原始碼
- CSS3實現的禁止文字選中程式碼例項CSSS3
- CSS3 tab選項卡動態切換CSSS3
- javascript實現tab選項卡過程分解詳解JavaScript
- css實現對聯程式碼例項CSS
- js左右滑動選項卡效果程式碼例項JS
- 使用原生js實現選項卡功能例項教程JS