我开发的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. (iOS)开发中收集的小方法

    1.颜色转变成图片 - (UIImage *)createImageWithColor:(UIColor *)color {     CGRect rect = CGRectMake(0.0f, 0. ...

  2. Windows入门基础：2.vs2013中Icon显示

    第一:系统小图标的显示 wndclass.hIcon = LoadIcon(NULL,IDI_WARNING); //LoadIcon函数的第一的参数要为0,第二个参数是系统自定义的ID号: IDI_ ...

  3. DataTables源码分析（一）

    DataTables源码分析 写在前面 作为一名常年奋战在java世界中的程序猿,当我接触到现在所谓的前端技术时,内心其实是崩溃的.因为,前端的技术给我的第一个感觉就是"乱",这里 ...

  4. 使用python发送QQ邮件

    这里用到了Python的两个包来发送邮件: smtplib 和 email . Python 的 email 模块里包含了许多实用的邮件格式设置函数,可以用来创建邮件“包裹”.使用的 MIMEText ...

  5. druid查询

    查询是发送HTTP请求到,Broker, Historical或者Realtime节点.查询的JSON表达和每种节点类型公开相同的查询接口. Queries are made using an HTT ...

  6. vue学习笔记-one

    学习vue基础以来,看各种教程,练习,随手写写,有错误请大家指导, 目前vue已经升级到2.0的版本,学习也最好是2.0的版本开始. 先看vue的几个特点:1,简单,2,轻量,3,模块友好 4, 组件 ...

  7. netty——私有协议栈开发案例

    netty--私有协议栈开发案例 摘要: 在学习李林峰老师的Netty权威指南中,觉得第十二章<私有协议栈开发>中的案例代码比较有代表性,讲的也不错,但是代码中个人认为有些简单的错误,个人 ...

  8. 【转载】google搜索从入门到精通

    原文地址:http://www.cnblogs.com/helloIT/articles/5095668.html /***************************************** ...

  9. 《HelloGitHub》第 13 期

    公告 本期推荐的项目到达了 30 个,里面少不了对本项目支持的小伙伴们,再次感谢大家. 本次排版尝试:根据分类项目名排序,为了让大家方便查阅.如果有任何建议和意见欢迎留言讨论 临近 5.1 假期,所以 ...

  10. 子集构造法实现NFA的确定化

    功能: 采用子集构造算法实现NFA的确定化 输入:读取NFA的文件(文件名test.txt),  文件格式: 第一列表示状态名,第二列和第三列分别表示输入字符a和b到达的状态 输出:确定化后的DFA( ...