我开发的tab切换插件，基于jquery库，实现tab标签页的切换。
插件的名称为jquery.tabSwitch.js。
插件使用实际项目页面：http://www.shmsa.gov.cn/html/index.html
插件实现代码如下：
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; 200px;border: 1px solid red;margin-right: 20px;"> 12 tab1 13 </span> 14 <span class="aa" style="cursor: pointer;display: inline-block; 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切换插件可以应用到网站建设中，减少代码开发工作。