jquery tab插件精简版分享


复制代码 代码如下:

/*
* 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做选择器自己扩展去吧,呵呵



相关阅读:
使用FreeHost SQL2000网页管理器出错解决办法
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
CSS教程:闭合CSS浮动元素的几种方法
adodb.stream对象的方法/属性
javascript学习随笔(编写浏览器脚本 Navigator Scripting )
深度分析Win2003自动升级补丁
WINDOWS服务器安装多套PHP
在RedHat Linux下安装QQ
CSS border-style 属性使用方法
css中url的路径含义及使用
CSS+DIV制作梯形状的不规则网站导航
ORACLE中字符串split的一种方法
更方便的单选框
解析SQL Server数据体系和应用程序逻辑
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4