tab選項卡切換例項程式碼
選項卡效果在網頁中有大量的應用,當然在網上也有大量的例項,本章節就分享一個此類的選項卡效果,並且介紹一下它的實現過程,希望能夠給需要的朋友或者想知道實現原理的朋友帶來一定的幫助。
例項程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>CSS教程-螞蟻部落</title> <style type="text/css"> li { border:1px solid #b5e2f3; border-bottom:0px; float:left; width:100px; height:25px; margin:0 7px; background:#F1FEF3; padding:9px 0 0 0; text-align:center; color:#33a3dc; cursor:pointer; } ul { width:800; height:36px; border-bottom:1px solid #b5e2f3; list-style:none; } #selected { background:#FFF!important; border-bottom:2px solid #FFF!important; } ul{margin:-1px;} #cate1, #cate2, #cate3, #cate4, #cate5 { clear:both; height:300px; background:#FFFFFF; width:800px; height:100px; padding:25px; border:1px solid #b5e2f3; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> var tab=function(tabId,activeId){ $("#"+tabId).delegate("li:not(#"+activeId+")","click",function(){ $("#"+$("#"+activeId).attr("tar")).css("display","none"); $("#"+activeId).removeAttr("id"); $(this).attr("id",activeId); $("#"+$(this).attr("tar")).css("display","block"); }) } $(document).ready(function(){ tab("tab","selected"); }) </script> </head> <body> <div id="tab"> <ul> <li tar="cate1" id="selected">標題一</li> <li tar="cate2">標題二</li> <li tar="cate3">標題三</li> <li tar="cate4">標題四</li> </ul> </div> <div> <div id="cate1" style="display:block;">螞蟻部落一</div> <div id="cate2" style="display:none;">螞蟻部落二</div> <div id="cate3" style="display:none;">螞蟻部落三</div> <div id="cate4" style="display:none;">螞蟻部落四</div> </div> </body> </html>
以上程式碼實現了簡單的選項卡切換效果,實現的過程也比較簡單,下面做一下簡單的介紹。
一.實現原理:
原理很簡單,在預設狀態下,tab元素下的第一個li元素具有id屬性屬性,通過此屬性設定了它的樣式狀態,同時選項卡內容部分,第一個li是出於現實狀態的,其他處於隱藏狀態。然後為tab元素下id屬性值不為selectd的li元素註冊click事件處理函式,當點選這些li元素的時候,能夠將當前顯示的內容部分隱藏,同時移除之前選中標題li的id屬性,然後設定當前被點選li的id屬性值,同時將相應的內容li顯示。原理大體如此,感覺介紹的比較混亂,最好參閱程式碼註釋,自己分析理解。
二.程式碼註釋:
1.var tab=function(tabId,activeId){},此函式用來進行切換處理,具有兩個引數,第一個引數是標題li的容器元素id,第二個引數是當前被選中標題li的id屬性值。
2.$("#"+tabId).delegate("li:not(#"+activeId+")","click",function(){}),就本特效而言,是為tab元素下的id屬性值不為selectedli元素註冊click事件處理函式。
3.$("#"+$("#"+activeId).attr("tar")).css("display","none"),將上一個顯示的內容li隱藏。
4.$("#"+activeId).removeAttr("id"),將上一個顯示的標題li中的id屬性值移除。
5.$(this).attr("id",activeId),設定當前顯示的標題li的id屬性值。
6.$("#"+$(this).attr("tar")).css("display","block"),對應的內容li設定為顯示狀態。
三.相關閱讀:
1.not選擇器可以參閱jQuery :not選擇器一章節。
2.attr()函式可以參閱jQuery attr()一章節。
3.removeAttr()函式可以參閱jQuery removeAttr()一章節。
4.css()函式可以參閱jQuery css()一章節。
相關文章
- 純css tab選項卡程式碼例項CSS
- jQuery tab選項卡效果程式碼例項jQuery
- 原生js tab選項卡程式碼例項JS
- jQuery選項卡切換圖片效果程式碼例項jQuery
- jQuery實現的tab選項卡程式碼例項jQuery
- 滑鼠虛滑過選項卡切換效果程式碼例項
- 純css實現的tab選項卡程式碼例項CSS
- css3實現tab選項卡程式碼例項CSSS3
- CSS3 tab選項卡動態切換CSSS3
- js內容左右滑動切換的選項卡程式碼例項JS
- 物件導向實現的tab選項卡效果程式碼例項物件
- jQuery選項卡例項程式碼jQuery
- jQuery tab選項卡程式碼詳解jQuery
- javascript tab選項卡JavaScript
- js選項卡簡單程式碼例項JS
- 如何實現選項卡切換
- JavaScript tab選項卡效果JavaScript
- JavaScript tab選項卡功能JavaScript
- JavaScript多級選項卡效果程式碼例項JavaScript
- bootstrap原始碼分析之tab(選項卡)boot原始碼
- 純CSS的導航欄Tab切換例項CSS
- js左右滑動選項卡效果程式碼例項JS
- jquery實現的選項卡效果例項程式碼jQuery
- layui豎版tab選項卡UI
- jquery tab選項卡詳解jQuery
- 導航欄背景切換程式碼例項
- jquery.idTabs.min.js選項卡程式碼例項jQueryJS
- js實現的垂直選項卡效果程式碼例項JS
- JavaScript禁用tab鍵程式碼例項JavaScript
- 基於swiper的Tab選項卡
- 利用jQuery實現Tab選項卡jQuery
- javascript tab選項卡效果詳解JavaScript
- 微信小程式的tab選項卡的實現微信小程式
- js實現的可以通用的選項卡程式碼例項JS
- jquery.idTabs實現的選項卡程式碼例項jQuery
- jQuery實現的選項卡的巢狀程式碼例項jQuery巢狀
- select下拉選單項互換效果程式碼例項
- js如何禁用tab鍵例項程式碼JS