DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery tab插件精簡版分享
jquery tab插件精簡版分享
編輯:JQuery特效代碼     
代碼如下:
/*
* jqpressToos1.0
*
* Copyright (c) 2011 yepeng
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
*/

$.fn.extend({
//插件名稱:Tab選項卡
jqpressTab: function(options) {
//參數和默認值
var defaults = {
_tabClass: null,//選項卡樣式
_childs:null //子選項 樣式選擇器
};
var options = $.extend(defaults, options);
var o = options;

var parentCate = $(this);
var childCate = $(o._childs);

parentCate.mouseover(function() {
parentCate.removeClass(o._tabClass);

$(this).addClass(o._tabClass);
for (i = 0; i < parentCate.length; i++) {
if (parentCate[i].className == o._tabClass) {
childCate[i].style.display = "block";
} else {
childCate[i].style.display = "none";
}
}

});
}
});

})(jQuery);

  調用方法更簡單:
代碼如下:
jQuery(document).ready(function(){ $(".mytab li a").jqpressTab({ _tabClass: "樣式名稱", _childs: "子元素樣式名稱" });});

  如果需要根據ID做選擇器自己擴展去吧,呵呵
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved