<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<style type="text/css">

.tab_list li{


list-style:none;


margin:5px;


display:inline;


cursor:pointer;

}

.tab_list .active{


background-color:black;


color:white;

}

</style>

<script>

(function($){


var isShow=false;


$.fn.tab=function(options){


this.opts=$.extend({},$.fn.tab.defaults,options);


this._init();


this.disableArr=[];


};


$.fn.tab.prototype={


_init:function(){


var _this=this;


if($(_this.opts.tabList).length>0){


$(_this.opts.tabList).each(function(index){


$(this).bind(_this.opts.eventType,function(){


if($.inArray(index,_this.disableArr)==-1&&(!isShow)&&!$(this).hasClass(_this.opts.tabActiveClass)){


if(_this.opts.callBackStartEvent){


_this.opts.callBackStartEvent(index);


}


$(_this.opts.tabList).removeClass(_this.opts.tabActiveClass);


$(this).addClass(_this.opts.tabActiveClass);


showContent(index,_this.opts);


}


});


});


}


},


setDisable:function(index){


var _this=this;


if($.inArray(index,this.disableArr)==-1){


this.disableArr.push(index);


$(_this.opts.tabList).eq(index).addClass(_this.opts.tabDisableClass);


}


},


setEnable:function(index){


var _this=this;


var i=$.inArray(index,this.disableArr);


if(i>-1){


this.disableArr.splice(i,1);


$(_this.opts.tabList).eq(index).removeClass(_this.opts.tabDisableClass);


}


},


triggleTab:function(index){


$(this.opts.tabList).eq(index).trigger(this.opts.eventType);


}


}


$.fn.tab.defaults={


tabList:".tab_list li",


contentList:".tab_content",


tabActiveClass:"active",


tabDisableClass:"disable",


eventType:"click",


showType:"show",


showSpeed:200,


callBackStartEvent:null,


callBackStartEvent:null,


callBackShowEvent:null


};


function showContent(index,opts){


isShow=true;


var _this=this;


switch(opts.showType){


case "show":


$(opts.contentList+":visible").hide();


if(opts.callBackHideEvent){


opts.callBackHideEvent(index);


}


$(opts.contentList).eq(index).show();


if(opts.callBackShowEvent){


opts.callBackShowEvent(index);


}


isShow=false;


break;


case "fade":


$(opts.contentList+":visible").fadeOut(opts.showSpeed,function(){


if(opts.callBackHideEvent){


opts.callBackHideEvent(index);


}


$(opts.contentList).eq(index).fadeIn(function(){


if(opts.callBackShowEvent){


opts.callBackShowEvent(index);


}


isShow=false;


});


});


break;


case "slide":


$(opts.contentList+":visible").slideUp(opts.showSpeed,function(){


if(opts.callBackHideEvent){


opts.callBackHideEvent(index);


}


$(opts.contentList).eq(index).slideDown(function(){


if(opts.callBackShowEvent){


opts.callBackShowEvent(index);


}


isShow=false;


});


});


break;


}


}

})(jQuery);

$(function(){


var tab=new $.fn.tab({


tabList:".tab_list li",


contentList:".tab_content",


eventType:"mouseover",


showType:"fade"


});

});

</script>

</head>

<body>

<div class="tab_box">


<ul class="tab_list">


<li class="active">tab1</li>


<li>tab2</li>


<li>tab3</li>


</ul>


<div class="sub_box">


<div class="tab_content">


<p>你知道</p>


</div>


<div class="tab_content" style="display:none">


<p>我是</p>


</div>


<div class="tab_content" style="display:none;">


<p>谁么？</p>


</div>


</div>

</div>

</body>

</html>

jquery插件tab——小试牛刀的更多相关文章

  1. 自写Jquery插件 Tab

    原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067017.html 每每看到别人写的Jquery插件,自己也试着学习尝试,终有结果,废话不多 ...

  2. 自写Jquery插件 Menu

    原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067543.html 可以结合我自写的Jquery插件Tab 一起使用哦 上一个整体效果 直接 ...

  3. 代码简洁的滑动门（tab）jquery插件

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  4. jQuery 插件分享-非常优秀的tab插件tabulous- 学徒帮

    干货jquery插件分享之tab. tab 选项卡切换,在日常开发中也是一种比较常见的呈现控件,今天这个tab控件效果还是蛮喜欢的,推荐给大家有用到的场景可以试试: tabulous.js A jQu ...

  5. 封装jQuery插件实现TAB切换

    先上效果图: 直接上代码: index.html <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  7. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  8. 自己编写jQuery插件之Tab切换

    自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...

  9. BootStrap_04之jQuery插件（导航、轮播）、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

随机推荐

  1. Google机器学习教程心得（一）

    Hello world Google Machine Learning Recipes 1 官方中文博客 http://chinagdg.org/2016/03/machine-learning-re ...

  2. Es分析

    http://my.oschina.net/lxbzj/blog/138587 http://donlianli.iteye.com/blog/1923017 http://tangzhaohui.n ...

  3. Keil MDK中使用pc-lint的详细方法

    keil MDK版本:V4.03 PC-lint版本:  V8.0 关于pc-lint的强大作用,网上有很多,这里不想再复述,只说一句:能通过pc-lint检验的程序不一定没有问题,但通过了pc-li ...

  4. chrome提供的功能

    chrome://chrome-urls/ List of Chrome URLs chrome://accessibility chrome://appcache-internals chrome: ...

  5. Webbrowser中模拟连接点击（非鼠标模拟）

    Delphi uses mshtml, ActiveX; //初始加载网易主页 procedure TForm1.FormCreate(Sender: TObject); begin Webbrows ...

  6. Delphi多线程数据库查询（ADO）

    ADO多线程数据库查询通常会出现3个问题: 1.CoInitialize 没有调用(CoInitialize was not called):所以,在使用任何dbGo对象前,必须手 调用CoIniti ...

  7. 简单RTP发送类c++实现

    我之前编译了jrtplib 3.9.1,并且在项目中使用,结果发现在用这个库时,程序体积有增加了300多K,感觉实在是有点笨重,我无法就是用来发送rtp包而已.想想还是自己重新实现一个简单的类用用拉倒 ...

  8. puppet svn集成

    puppet svn集成

  9. Mysql中Key与Index的区别

    mysql的key和index多少有点令人迷惑,这实际上考察对数据库体系结构的了解的. 1 key 是数据库的物理结构,它包含两层意义,一是约束(偏重于约束和规范数据库的结构完整性),二是索引(辅助查 ...

  10. HipHop算法：利用微博互动关系挖掘社交圈

    /* 版权声明:可以任意转载,转载时请务必标明文章原始出处和作者信息 .*/                  CopyMiddle: 张俊林 TimeStamp:2012年3 月 在微博环境下,如何 ...