jquery-tab效果万能标签导航

来源:赵克立博客分类: HTML5 标签：js特效 jquery插件 Sublime发布时间:2014-05-02 07:05:00最后更新:2014-05-07 23:47:31浏览:2869

本文为博主原创文章，转载请声明原文链接...谢谢。o_0。

原文链接:

http://www.zhaokeli.com /article/1699.html

更新时间：

2014-05-07 23:47:31

温馨提示：

学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

引入下面js

(function($){
	$.fn.mytab=function(options){
						var thissel=$(this).selector;//取传进来的选择器
		                var defaults={
							'ev':'mouseover',
							'navcls':'.kl-tab-nav',//默认导航类
							'divcls':'.kl-tab-div',//默认内容块
                            'navhovercls':'n1',//nav显示时候拥有的类
                            'divshowcls':'d1',//div显示的时候拥有的类
                            'showdiv':1,
							'effect':'fade'
                            };
                        var opts = $.extend(defaults, options); 
						$(thissel+' '+opts.divcls).each(function(index, element) {
							$(this).attr('markid',index);
						});
                        $(thissel+' '+opts.navcls).each(function(index, element) {
							$(this).attr('markid',index);
                        });
                        $(thissel+' '+opts.divcls).hide();
                        $(thissel+' '+opts.navcls).bind(opts.ev,function(){
                                    var obj=$(this);
                                    //设置hover类
                                    obj.parents(thissel).find(opts.navcls).removeClass(opts.navhovercls);
                                    obj.addClass(opts.navhovercls);
                                    //隐藏掉所有的tabdiv
                                    obj.parents(thissel).find(opts.divcls).hide();
                                    obj.parents(thissel).find(opts.divcls).removeClass(opts.divshowcls);
                                     //查找要显示的div
                                     obj.parents(thissel).find(opts.navcls).each(function(i) {
                                        if($(this).attr('markid')==obj.attr('markid')){
                                            obj.parents(thissel).find(opts.divcls).eq(i).addClass(opts.divshowcls);
											var temobj=obj.parents(thissel).find(opts.divcls).eq(i);
											if(opts.effect=='fade'){
												temobj.css({'opacity':'0','display':'block'});
												temobj.animate({opacity:1},200);
											}else{
												temobj.show();
											}
											
                                            }            
                                     });
                        });
//默认显示的块
						$(thissel+' '+opts.navcls+':first-child').trigger(opts.ev);
						
		};
	})(jQuery);

//使用方法
$('.tab-wrap').mytab({      'ev':'click',
                            'navcls':'.tabnav',//默认导航类
                            'divcls':'.tab-pane',//默认内容块
                            'navhovercls':'current',//nav显示时候拥有的类
                            'divshowcls':'d1'//div显示的时候拥有的类
});