我开发的tab切换插件,基于jquery库,实现tab标签页的切换。
插件的名称为jquery.tabSwitch.js。
插件实现代码如下:
1 ;
2 (function ($) {
3 $.fn.tabSwitch = function (options) {
4 //默认值
5 var defaultVal = {
6 tabName: 'a',//tab 标签页
7 tabActiveClass: 'on',//当前显示的tab标签的class
8 tabContent: 'ul',//tab 标签页对应的内容
9 tabType: 'mouseenter', // click , mouseenter , mouseleave , mouseout , mouseover 触发tab事件切换的类型
10 tabIs: true, //页面加载后触发一次tab切换事件(第一个tab页显示内容)
11 isInndex: false //开始显示,移动到tab后需要隐藏的元素
12 };
13 var obj = $.extend(defaultVal, options); // 合并参数
14
15 return this.each(function () {
16 var selObject = $(this);//获取当前对象
17 var selTabName = selObject.find(obj.tabName);//获取当前对象下的tab标签
18 var selTabContent = selObject.find(obj.tabContent);//获取当前对象下的tab标签内容
19
20 //绑定事件
21 selTabName.bind(obj.tabType, function () {
22 //所有的tab移除tabActiveClass
23 selTabName.removeClass(obj.tabActiveClass);
24 //当前的tab添加tabActiveClass
25 $(this).addClass(obj.tabActiveClass);
26 //所有的tab内容隐藏
27 selTabContent.hide();
28 //当前的tab对应的内容显示
29 selTabContent.eq(selTabName.index(this)).show();
30
31 //若存在移动到tab后需要隐藏的元素
32 if (obj.isInndex) {
33 //隐藏需要不显示的元素
34 $(obj.isInndex).hide();
35 }
36 });
37
38 //页面加载后触发第一个tab显示内容
39 if (obj.tabIs) {selTabName.eq(0).trigger(obj.tabType);}
40 //若存在移动到tab后需要隐藏的元素
41 if (obj.isInndex) {
42 //当前元素移开后,被隐藏的元素显示
43 selObject.mouseleave(function (i) {
44 //所有的tab标签移除tabActiveClass
45 selTabName.removeClass(obj.tabActiveClass);
46 //所有的tab标签页对应的内容隐藏
47 selTabContent.hide();
48 //被隐藏的元素显示
49 $(obj.isInndex).show();
50 });
51 }
52 });
53 }
54 })(jQuery);
插件使用:
(1)实现tab标签页切换:
实例代码(注:需要引入jquery)
1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7 <title>tab切换插件--tabSwitch</title>
8 </head>
9 <body>
10 <div class="parent">
11 <div class="aa" style="cursor: pointer;">
12 tab1
13 </div>
14 <div class="aa" style="cursor: pointer;">
15 tab2
16 </div>
17 <ul class="bb">
18 <li>tab1 内容</li>
19 <li>tab1 内容</li>
20 <li>tab1 内容</li>
21 </ul>
22 <ul class="bb">
23 <li>tab2 内容</li>
24 <li>tab2 内容</li>
25 <li>tab3 内容</li>
26 </ul>
27 </div>
28 <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
29 <script src="js/jquery.tabSwitch.js" type="text/javascript" charset="utf-8"></script>
30 <script type="text/javascript">
31 $('.parent').tabSwitch({tabName: '.aa',tabContent: 'ul'})
32 </script>
33 </body>
34 </html>
显示效果:
(2)应用:移动到tab上显示tab的内容,移出tab后显示其他内容。
少说,看代码,自己运行看效果。
1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7 <title>tab切换插件--tabSwitch</title>
8 </head>
9 <body>
10 <div class="parent">
11 <span class="aa" style="cursor: pointer;display: inline-block;width: 200px;border: 1px solid red;margin-right: 20px;">
12 tab1
13 </span>
14 <span class="aa" style="cursor: pointer;display: inline-block;width: 200px;border: 1px solid red;">
15 tab2
16 </span>
17 <div class="cc">
18 占据空间
19 </div>
20 <ul class="bb">
21 <li>tab1 内容</li>
22 <li>tab1 内容</li>
23 <li>tab1 内容</li>
24 </ul>
25 <ul class="bb">
26 <li>tab2 内容</li>
27 <li>tab2 内容</li>
28 <li>tab3 内容</li>
29 </ul>
30 </div>
31 <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
32 <script src="js/jquery.tabSwitch.js" type="text/javascript" charset="utf-8"></script>
33 <script type="text/javascript">
34 $('.bb').hide();
35 $('.parent').tabSwitch({tabName: '.aa',tabContent: 'ul',isInndex: '.cc',tabIs: false})
36 </script>
37 </body>
38 </html>
至此,tab切换插件已经写完,请运行查看效果,此tab切换插件可以应用到网站建设中,减少代码开发工作。