jquery可扩展的tab导航效果
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2017-06-02 19:19:04
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script> <title>tab</title> <style> .kl-tab{} .kl-tab-nav{ display:block; height:30px; float:left;line-height: 30px;width: 100px;text-align: center;border-right: solid 1px #ccc;} .kl-tab .kl-tab-nav-block,.kl-tab .kl-tab-div-block{ display:block; width:100%; float:left;} .kl-tab .kl-tab-div{ width:100%;} </style> </head> <body> <div class="kl-tab"> <ul class="kl-tab-nav-block"> <li class="kl-tab-nav">1</li> <li class="kl-tab-nav">2</li> <li class="kl-tab-nav">3</li> </ul> <div class="kl-tab-div-block"> <div class="kl-tab-div">11111</div> <div class="kl-tab-div">22222</div> <div class="kl-tab-div">33333</div> </div> </div> <div class="kl-tab"> <ul class="kl-tab-nav-block"> <li class="kl-tab-nav">1</li> <li class="kl-tab-nav">2</li> <li class="kl-tab-nav">3</li> </ul> <div class="kl-tab-div-block"> <div class="kl-tab-div">11111</div> <div class="kl-tab-div">22222</div> <div class="kl-tab-div">33333</div> </div> </div> <div class="a"> <div class="b">b1</div> <div class="b">b2</div> <div class="bb">bb1</div> <div class="bb">bb2</div> </div> <script> (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); $('.kl-tab').mytab(); $('.a').mytab({navcls:'.b',divcls:'.bb',effect:'show'}); </script> </body> </html>