我开发的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. JDBC基础学习(六)—数据库连接池

    一.数据库连接池介绍 1.数据库连接池的缘由      对于一个简单的数据库应用,由于对于数据库的访问不是很频繁.这时可以简单地在需要访问数据库时,就新创建一个连接,用完后就关闭它,这样做也不会带来什 ...

  2. JDBC基础学习(一)—JDBC的增删改查

    一.数据的持久化     持久化(persistence): 把数据保存到可掉电式存储设备中以供之后使用.大多数情况下,数据持久化意味着将内存中的数据保存到硬盘上加以固化,而持久化的实现过程大多通过各 ...

  3. huffman压缩解压文件【代码】

    距离上次写完哈夫曼编码已经过去一周了,这一周都在写huffman压缩解压,哎,在很多小错误上浪费了很多时间调bug.其实这个程序的最关键部分不是我自己想的,而是借鉴了某位园友的代码,但是,无论如何,自 ...

  4. Jmeter的逻辑控制器——Controller

    逻辑控制器(Logic Controller) --贯穿整个Test Plan中,与各组件执行顺序没关系:目的是用于控制采样器的执行顺序. Simple Controller Simple Contr ...

  5. spring项目log4j使用入门

    log4j是Java开发中经常使用的一个日志框架,功能强大,配置灵活,基本上可以满足项目开发中对日志功能的大部分需求.我前后经历了四五个项目,采用的日志框架都是log4j,这也反应了log4j受欢迎的 ...

  6. STM32定时器

    /*****************************************************************************初始化定时器**************** ...

  7. JavaScript中undefined 和not defined

    首先呢,我们来介绍undefined,xx is not defined的区别 (创建一个html文件,在头部编写JavaScript代码) 我们先编写如下代码: <script type=&q ...

  8. JAVA中令人疑惑的字符串

    Java中不同的字符串存在于同一个存储池中,字符串变量将指向存储池中相应的位置,也就是字符串变量里面包含的并不是字符串而是这个字符串对象的内存地址. String a = "123" ...

  9. python特征提取——pyAudioAnalysis工具包

    作者:桂. 时间:2017-05-04  18:31:09 链接:http://www.cnblogs.com/xingshansi/p/6806637.html 前言 语音识别等应用离不开音频特征的 ...

  10. angularjs ng-class

    ng-class指令可以设置一个键值对,用于决定是否添加一个特定的类名,键为class名,值为bool类型表示是否添加该类名 <style> .red { color: red; } .g ...