jQuery實現的tab選項卡程式碼例項
本章節分享一段程式碼例項,它利用jQuery實現的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; } body { font-size: 14px; font-family: "Microsoft YaHei"; } ul, li { list-style: none; } #tab { position: relative; margin-left: 460px; margin-top: 20px; } #tab .tabList ul li { float: left; background: #fefefe; background: -moz-linear-gradient(top, #fefefe, #ededed); background: -o-linear-gradient(top, #fefefe, #ededed); background: -webkit-linear-gradient(top, #fefefe, #ededed); border: 1px solid #ccc; padding: 5px 0; width: 100px; text-align: center; margin-left: -1px; position: relative; cursor: pointer; } #tab .tabList li a { color: #333; text-decoration: none; } #tab .tabCon { position: absolute; left: -1px; top: 32px; border: 1px solid #ccc; border-top: none; width: 403px; height: 100px; } #tab .tabCon div { padding: 10px; position: absolute; opacity: 0; filter: alpha(opacity=0); } #tab .tabList li.cur { border-bottom: none; background: #fff; } #tab .tabCon div.cur1 { opacity: 1; filter: alpha(opacity=100); } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(function () { $(".tabList li").mouseover(function () { var index = $(this).index(); $(this).addClass("cur"); $(this).siblings().removeClass("cur"); $(".tabCon div").eq(index).addClass("cur1"); $(".tabCon div").eq(index).siblings().removeClass("cur1"); }) }) </script> </head> <body> <div id="tab"> <div class="tabList"> <ul> <li class="cur"><a href="#">螞蟻部落一</a></li> <li><a href="#">螞蟻部落二</a></li> <li><a href="#">螞蟻部落三</a></li> <li><a href="#">螞蟻部落四</a></li> </ul> </div> <div class="tabCon"> <div class="cur1">本站的url地址是softwhy.com</div> <div>只有努力奮鬥才會有美好的未來</div> <div>每一天都是新的,好好珍惜</div> <div>沒有人一開始就是高手,必須努力</div> </div> </div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
[CSS] 純文字檢視 複製程式碼#tab .tabList ul li { float: left; background: #fefefe; background: -moz-linear-gradient(top, #fefefe, #ededed); background: -o-linear-gradient(top, #fefefe, #ededed); background: -webkit-linear-gradient(top, #fefefe, #ededed); border: 1px solid #ccc; padding: 5px 0; width: 100px; text-align: center; margin-left: -1px; position: relative; cursor: pointer; }
上面的css程式碼是用來設定標題li元素的樣式的。
[CSS] 純文字檢視 複製程式碼#tab .tabCon { position: absolute; left: -1px; top: 32px; border: 1px solid #ccc; border-top: none; width: 403px; height: 100px; }
上面的程式碼用來設定選項卡內容元素的容器。
[CSS] 純文字檢視 複製程式碼#tab .tabCon div { padding: 10px; position: absolute; opacity: 0; filter: alpha(opacity=0); }
設定內容選項卡為絕對定位,並且都是全透明。
[CSS] 純文字檢視 複製程式碼#tab .tabList li.cur { border-bottom: none; background: #fff; }
上面的程式碼設定滑鼠懸浮於標題選項卡時候的樣式。
[CSS] 純文字檢視 複製程式碼#tab .tabCon div.cur1 { opacity: 1; filter: alpha(opacity=100); }
設定當前顯示內容選項卡的樣式,內容選項卡之所以顯示,是因為將其設定為不透明。
[JavaScript] 純文字檢視 複製程式碼$(function () {})
當文件結構完全載入完畢再去執行函式中的程式碼。
[JavaScript] 純文字檢視 複製程式碼$(".tabList li").mouseover(function () {})
為標題li元素註冊mouseover事件處理函式。
[JavaScript] 純文字檢視 複製程式碼var index = $(this).index()
獲取當前li元素的索引值。
[JavaScript] 純文字檢視 複製程式碼$(this).addClass("cur"); $(this).siblings().removeClass("cur");
為當前滑鼠懸浮的li元素新增名為cur的class樣式類。
並且移出其他標題選項卡li元素的名為cur的class樣式類。
[JavaScript] 純文字檢視 複製程式碼$(".tabCon div").eq(index).addClass("cur1"); $(".tabCon div").eq(index).siblings().removeClass("cur1");
和上面是一樣的道理。
二.相關閱讀:
(1).mouseover事件可以參閱jQuery mouseover事件一章節。
(2).index()可以參閱jQuery index()一章節。
(3).addClass()可以參閱jQuery addClass()一章節。
(4).siblings()可以參閱jQuery siblings()一章節。
(5).removeClass()可以參閱jQuery removeClass()一章節。
(6).eq()可以參閱jQuery eq()一章節。
相關文章
- jQuery tab選項卡效果程式碼例項jQuery
- 純css實現的tab選項卡程式碼例項CSS
- css3實現tab選項卡程式碼例項CSSS3
- jquery實現的選項卡效果例項程式碼jQuery
- 利用jQuery實現Tab選項卡jQuery
- 物件導向實現的tab選項卡效果程式碼例項物件
- 純css tab選項卡程式碼例項CSS
- 原生js tab選項卡程式碼例項JS
- tab選項卡切換例項程式碼
- jQuery選項卡例項程式碼jQuery
- jQuery實現的選項卡的巢狀程式碼例項jQuery巢狀
- jquery.idTabs實現的選項卡程式碼例項jQuery
- jQuery tab選項卡程式碼詳解jQuery
- jQuery如何實現tab選項卡效果jQuery
- jquery tab選項卡詳解jQuery
- 微信小程式的tab選項卡的實現微信小程式
- js實現的垂直選項卡效果程式碼例項JS
- js實現的可以通用的選項卡程式碼例項JS
- jquery.idTabs.min.js選項卡程式碼例項jQueryJS
- jQuery選項卡切換圖片效果程式碼例項jQuery
- 純css實現tab選項卡效果CSS
- javascript tab選項卡JavaScript
- jQuery實現的禁用右鍵選單程式碼例項jQuery
- 選項卡方式實現的多角色登陸表單程式碼例項
- js選項卡簡單程式碼例項JS
- Android Tab 選項卡的簡單實現薦Android
- js實現jquery的extend()程式碼例項JSjQuery
- JavaScript tab選項卡效果JavaScript
- JavaScript tab選項卡功能JavaScript
- JavaScript多級選項卡效果程式碼例項JavaScript
- jQuery模擬實現滑鼠點選事件程式碼例項jQuery事件
- bootstrap原始碼分析之tab(選項卡)boot原始碼
- javascript實現tab選項卡過程分解詳解JavaScript
- jquery選項卡jQuery
- js左右滑動選項卡效果程式碼例項JS
- 使用原生js實現選項卡功能例項教程JS
- jquery實現的分頁效果例項程式碼jQuery
- jQuery實現的隔行變色程式碼例項jQuery