JavaScript插件Tab选项卡效果(js插件大全)

推荐整理分享JavaScript插件Tab选项卡效果(js插件大全)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:JavaScript插件编辑视频,JavaScript插件库,JavaScript插件库,JavaScript插件库,JavaScript插件开发教程,JavaScript插件下载,JavaScript插件编辑视频,JavaScript插件库,内容如对您有帮助，希望把文章链接给更多的朋友！

闲来无事，研究了一下JavaScript插件的写法，今天就将自己写的一个小插件记录下来。

本文介绍了此款插件的基本用法，实现的功能以及代码。

首先，来看看最终效果：

这是一款普通的Tab选项卡插件，下面来讲讲它实现了哪些功能：

1、支持不同鼠标事件触发选项卡切换效果； 2、支持不同切换效果的配置，例如淡入淡出/直接切换； 3、支持默认展示第几个选项卡的配置； 4、支持选项卡的自动切换效果。

例子很简单，需要用到的知识包括： 1、html、css的基础知识； 2、对this，prototype，new等关键词的理解。

简而言之，就是通过参数配置的形式来完成不同效果的展示。

下面先看一看如何使用：

1、$(".js-tab").etab();2、$(".js-tab").etab({ triggerType: "click", effect: "fade", invoke: 2, auto: });3、Tab.init($(".js-tab"));

本插件支持几种不同的初始化方式，代码很简单，类似于BootStrap插件的使用方法。下面奉上完整的代码：

index.html

最后将插件代码列出来，在代码里面已经写了很详细的注释：

如此看来，是不是很简单，一起来动手试试吧！