jquery可扩展的tab导航效果

来源:赵克立博客 分类: HTML5 标签:js特效发布时间:2014-05-10 23:05:01最后更新:2017-06-02 19:19:04浏览:1390
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。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>



微信号:kelicom QQ群:215861553 紧急求助须知
Win32/PHP/JS/Android/Python