jquery选项卡插件实现原理

作者：管理员

发布时间：2013/7/13 16:01:54

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=291

/*
* 选项卡插件参数配置
* tabMenu 		选项卡标题菜单容器ID
* tabContent　	选项卡内容容器ID
* event　		选项卡绑定的事件
*/
jQuery.tab = function(tabMenu,tabContent,event) {
	$(tabContent).find("li").hide();//隐藏所有的内容项
	$(tabMenu).find("li:first").addClass("cur").show();//默认第一个菜单显示
	$(tabContent).find("li:first").show();//默认第一个内容显示
	$(tabMenu).find("li").bind(event,function(){
		$(this).addClass("cur").siblings("li").removeClass("cur"); 
		var activeindex = $(tabMenu).find("li").index(this);
		$(tabContent).children().eq(activeindex).show().siblings().hide();
		return false;
	});
};

Jquery插件页面调用方式：

1、$.tab("#tabs","#tabContent","click"); //鼠标点击
2、$.tab("#tabs","#tabContent","mouseenter"); //鼠标划过

来源：http://bbs.jq-school.com/showtopic-285.aspx

关键字：jquery插件 选项卡插件 实现原理