我开发的tab切换插件，基于jquery库，实现tab标签页的切换。
插件的名称为jquery.tabSwitch.js。

插件使用实际项目页面：http://www.shmsa.gov.cn/html/index.html

插件实现代码如下：

 ;

 (function ($) {

     $.fn.tabSwitch = function (options) {

         //默认值

         var defaultVal = {

             tabName: 'a',//tab 标签页

             tabActiveClass: 'on',//当前显示的tab标签的class

             tabContent: 'ul',//tab 标签页对应的内容

             tabType: 'mouseenter',  // click , mouseenter , mouseleave , mouseout , mouseover  触发tab事件切换的类型

             tabIs: true,  //页面加载后触发一次tab切换事件（第一个tab页显示内容）

             isInndex: false  //开始显示，移动到tab后需要隐藏的元素

         };

         var obj = $.extend(defaultVal, options);  // 合并参数

         return this.each(function () {

             var selObject = $(this);//获取当前对象

             var selTabName = selObject.find(obj.tabName);//获取当前对象下的tab标签

             var selTabContent = selObject.find(obj.tabContent);//获取当前对象下的tab标签内容

             //绑定事件

             selTabName.bind(obj.tabType, function () {

                 //所有的tab移除tabActiveClass

                 selTabName.removeClass(obj.tabActiveClass);

                 //当前的tab添加tabActiveClass

                 $(this).addClass(obj.tabActiveClass);

                 //所有的tab内容隐藏

                 selTabContent.hide();

                 //当前的tab对应的内容显示

                 selTabContent.eq(selTabName.index(this)).show();

                 //若存在移动到tab后需要隐藏的元素

                 if (obj.isInndex) {

                     //隐藏需要不显示的元素

                     $(obj.isInndex).hide();

                 }

             });

             //页面加载后触发第一个tab显示内容

             if (obj.tabIs) {selTabName.eq(0).trigger(obj.tabType);}

             //若存在移动到tab后需要隐藏的元素

             if (obj.isInndex) {

                 //当前元素移开后，被隐藏的元素显示

                 selObject.mouseleave(function (i) {

                     //所有的tab标签移除tabActiveClass

                     selTabName.removeClass(obj.tabActiveClass);

                     //所有的tab标签页对应的内容隐藏

                     selTabContent.hide();

                     //被隐藏的元素显示

                     $(obj.isInndex).show();

                 });

             }

         });

     }

 })(jQuery);

插件使用：

（1）实现tab标签页切换：

实例代码（注：需要引入jquery）

 <!DOCTYPE html>

 <html lang="zh">

 <head>

     <meta charset="UTF-8" />

     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     <meta http-equiv="X-UA-Compatible" content="ie=edge" />

     <title>tab切换插件--tabSwitch</title>

 </head>

 <body>

     <div class="parent">

         <div class="aa" style="cursor: pointer;">

             tab1

         </div>

         <div class="aa" style="cursor: pointer;">

             tab2

         </div>

         <ul class="bb">

             <li>tab1 内容</li>

             <li>tab1 内容</li>

             <li>tab1 内容</li>

         </ul>

         <ul class="bb">

             <li>tab2 内容</li>

             <li>tab2 内容</li>

             <li>tab3 内容</li>

         </ul>

     </div>

     <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>

     <script src="js/jquery.tabSwitch.js" type="text/javascript" charset="utf-8"></script>

     <script type="text/javascript">

         $('.parent').tabSwitch({tabName: '.aa',tabContent: 'ul'})

     </script>

 </body>

 </html>

显示效果：

(2)应用：移动到tab上显示tab的内容，移出tab后显示其他内容。

少说，看代码，自己运行看效果。

 <!DOCTYPE html>

 <html lang="zh">

 <head>

     <meta charset="UTF-8" />

     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     <meta http-equiv="X-UA-Compatible" content="ie=edge" />

     <title>tab切换插件--tabSwitch</title>

 </head>

 <body>

     <div class="parent">

         <span class="aa" style="cursor: pointer;display: inline-block;width: 200px;border: 1px solid red;margin-right: 20px;">

             tab1

         </span>

         <span class="aa" style="cursor: pointer;display: inline-block;width: 200px;border: 1px solid red;">

             tab2

         </span>

         <div class="cc">

             占据空间

         </div>

         <ul class="bb">

             <li>tab1 内容</li>

             <li>tab1 内容</li>

             <li>tab1 内容</li>

         </ul>

         <ul class="bb">

             <li>tab2 内容</li>

             <li>tab2 内容</li>

             <li>tab3 内容</li>

         </ul>

     </div>

     <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>

     <script src="js/jquery.tabSwitch.js" type="text/javascript" charset="utf-8"></script>

     <script type="text/javascript">

         $('.bb').hide();

         $('.parent').tabSwitch({tabName: '.aa',tabContent: 'ul',isInndex: '.cc',tabIs: false})

     </script>

 </body>

 </html>

至此，tab切换插件已经写完，请运行查看效果，此tab切换插件可以应用到网站建设中，减少代码开发工作。

tab切换插件开发的更多相关文章

  1. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  3. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

  4. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  5. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

  6. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. js用户管理中心tab切换界面模板

    效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...

  8. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  9. ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息

    一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...

随机推荐

  1. ASP.NET Core 网站发布到Linux服务器

    长期以来,使用.NET开发的应用只能运行在Windows平台上面,而目前国内蓬勃发展的互联网公司由于成本的考虑,大量使用免费的Linux平台,这就使得.NET空有一身绝技但无法得到广大的施展空间,.N ...

  2. 一文搞定FastDFS分布式文件系统配置与部署

    Ubuntu下FastDFS分布式文件系统配置与部署 白宁超 2017年4月15日09:11:52 摘要: FastDFS是一个开源的轻量级分布式文件系统,功能包括:文件存储.文件同步.文件访问(文件 ...

  3. Java中的socket通信

    socket又称套接字,应用程序通常通过"套接字"向网络发出请求或应答网络请求 建立过程:服务器监听-客户端发出请求-建立链接-通信 特点:1.基于tcp链接,数据传输有保障,2. ...

  4. Oracle的登陆问题和初级学习增删改查(省略安装和卸载)

    1:学习Oracle首先需要安装Oracle,网上已经有很多很多教程了,这里不做叙述,自己百度即可,这里安装的标准版,个人根据需求安装学习或者企业开发即可.如果安装出错,自己百度Oracle的卸载即可 ...

  5. 用extjs6.0写一个点击新建窗口的功能

    一.写一个按钮 注意id { id: 'ListEdit', text:'编辑', iconCls:'x-fa fa-edit' } 二.写新建的页面 下面我新建的是表单,有几点需要注意的: ① 因为 ...

  6. ABP入门系列（16）——通过webapi与系统进行交互

    ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 1. 引言 上一节我们讲解了如何创建微信公众号模块,这一节我们就继续跟进,来讲一讲公众号模块如何与 ...

  7. ArrayList 线程安全

    都说ArrayList是线程不安全的,那为什么不安全呢.根据官方提供的源码, 我是这样理解的,ArrayList的成员方法都不是原子操作的,比如add(E)方法,该方法是在集合的尾部加入一个一个元素. ...

  8. 浅析c++/java/c#三大热门编程语言的运行效率

    从安全角度考虑,C#是这几中语言中最为安全的,它其中定义的相关安全机制很好的确保了系统的安全... 今天和同学们一起探讨下c++/java/c# 三大热门语言的运行效率情况,以及各自的用途. 估计有很 ...

  9. css3 felx布局

    一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. [css] .box ...

  10. TypeScript入门-高级类型

    高级类型 交叉类型 交叉类型,就是将多个类型合并为一个新的类型,这个新的类型具有这多个类型的成员,含有这几个类型的所有特性,是他们的综合体,像是集合的并集 例子: function extend< ...