jquery tab選項卡詳解
分享一段程式碼例項,它實現了簡單的tab選項卡效果。
下面就詳細介紹一下它的實現過程,程式碼例項如下:
[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; } #menubar ul { height: 29px; background-color: deepskyblue; list-style: none; border-top: solid 3px deepskyblue; padding-left: 1px; overflow: hidden; } #menubar ul li { float: left; margin: 0 2px; padding: 3px 24px; color: white; font-size: 15px; font-weight: bold; line-height: 20px; border-top-left-radius: 5px; border-top-right-radius: 5px; } #menubar ul li:hover { cursor: pointer; background-color: white; color: deepskyblue; } #menubar ul li.current { cursor: default; background-color: white; color: deepskyblue; height: 21px; font-size: 16px; padding-top: 5px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(function(){ $("#content").text($("#menubar ul li.current").text()).css({ "padding": "30px", "font-size": "120px" }); $("#menubar ul li").click(function () { var current = $(this).siblings(".current"); if($(this) == current.eq(0)){ return; } $(this).addClass("current"); current.removeClass("current"); $("#content").text($(this).text()); }); }); </script> </head> <body> <div id="menubar"> <ul> <li class="current">螞蟻部落</li> <li>css教程</li> <li>div教程</li> <li>js教程</li> </ul> </div> <div id="content"></div> </body> </html>
上面的程式碼實現了選項卡效果,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).$(function(){}),當文件結構完全載入完畢再去執行函式中的程式碼。
(2).$("#content").text($("#menubar ul li.current").text()).css({
"padding": "30px",
"font-size": "120px"
}),預設情況下,將當前選項卡的文字內容寫入id屬性值為content的元素中,也就是寫入選項卡內容元素。
並且設定它的內邊距和字型大小。
(3).$("#menubar ul li").click(function () {}),為li元素註冊click事件處理函式。
(4).var current = $(this).siblings(".current"),獲取當前點選li元素兄弟元素中class屬性值具有current的元素集合。
(4).if($(this) == current.eq(0)){
return;
},如果點選的li元素是當前選項卡,那麼直接跳出。
(5).$(this).addClass("current"),為當前元素class樣式類中新增current。
(6).current.removeClass("current"),刪除樣式類中的current。
(7).$("#content").html($(this).text()),將當前選項卡的文字內容寫入id屬性值為content的元素。
二.相關閱讀:
(1).siblings()可以參閱jQuery siblings()一章節。
(2).eq()可以參閱jQuery eq()一章節。
(3).addClass()可以參閱jQuery addClass()一章節。
(4).removeClass()可以參閱jQuery removeClass()一章節。
相關文章
- jQuery tab選項卡程式碼詳解jQuery
- javascript tab選項卡效果詳解JavaScript
- 利用jQuery實現Tab選項卡jQuery
- jQuery tab選項卡效果程式碼例項jQuery
- jQuery如何實現tab選項卡效果jQuery
- jQuery實現的tab選項卡程式碼例項jQuery
- javascript實現tab選項卡過程分解詳解JavaScript
- javascript tab選項卡JavaScript
- JavaScript tab選項卡效果JavaScript
- JavaScript tab選項卡功能JavaScript
- layui豎版tab選項卡UI
- jquery選項卡jQuery
- 基於swiper的Tab選項卡
- 純css tab選項卡程式碼例項CSS
- 原生js tab選項卡程式碼例項JS
- tab選項卡切換例項程式碼
- JavaScript選項卡效果詳解JavaScript
- 純css實現tab選項卡效果CSS
- :target偽類製作tab選項卡
- bootstrap原始碼分析之tab(選項卡)boot原始碼
- jQuery選項卡例項程式碼jQuery
- 純css實現的tab選項卡程式碼例項CSS
- css3實現tab選項卡程式碼例項CSSS3
- 原生JS 編寫移動端 tab選項卡JS
- CSS3 tab選項卡動態切換CSSS3
- 微信小程式的tab選項卡的實現微信小程式
- jquery動態增減選項卡jQuery
- Android Tab 選項卡的簡單實現薦Android
- 物件導向實現的tab選項卡效果程式碼例項物件
- jquery實現的選項卡效果例項程式碼jQuery
- JavaScript左右滑動切換的選項卡詳解JavaScript
- jquery.idTabs.min.js選項卡程式碼例項jQueryJS
- jQuery選項卡切換圖片效果程式碼例項jQuery
- jQuery - 選擇器詳解jQuery
- jquery.idTabs實現的選項卡程式碼例項jQuery
- jQuery實現的選項卡的巢狀程式碼例項jQuery巢狀
- jQuery頂部帶有選項卡的焦點圖效果jQuery
- 小程式 — 選項卡