我开发的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. 常用JS工具包

    /*********** *时间辅助类 ***********/ var DateHelper = { //得到两个时间的差值(天数) DateDiff: function (startDate, e ...

  2. C# 遍历泛型集合

    /// <summary> /// 遍历泛型 /// </summary> /// <typeparam name="T"></typep ...

  3. iOS图片填充UIImageView(contentMode)

    本文主要形象的介绍一下UIView的contentMode属性: 核心代码 [self.prp_imageView setContentMode:UIViewContentModeScaleAspec ...

  4. 使用swagger实现web api在线接口文档

    一.前言 通常我们的项目会包含许多对外的接口,这些接口都需要文档化,标准的接口描述文档需要描述接口的地址.参数.返回值.备注等等:像我们以前的做法是写在word/excel,通常是按模块划分,例如一个 ...

  5. meta 整理

    < meta > 元素 概要 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 we ...

  6. 一个全局变量引起的DLL崩溃

    参考我发的帖子: http://bbs.csdn.net/topics/390737064?page=1#post-397000946 现象是exe程序在加载dll的时候崩溃了,莫名其妙的崩溃了.换其 ...

  7. [Mobile Web]Web中如何分辨移动设备?（iPad、iPhone、Android）

    第一种, Javascript [javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片 var deviceAgent = navigator.use ...

  8. 初识Kafka----------Centos上单机部署、服务启动、JAVA客户端调用

    作为Apach下一个优秀的开源消息队列框架,Kafka已经成为很多互联网厂商日志采集处理的第一选择.后面在实际应用场景中可能会应用到,因此就先了解了一下.经过两个晚上的努力,总算是能够基本使用. 操作 ...

  9. ashMap源码阅读与解析

    目录结构 导入语 HashMap构造方法 put()方法解析 addEntry()方法解析 get()方法解析 remove()解析 HashMap如何进行遍历 导入语 HashMap是我们最常见也是 ...

  10. PHP 安装 phpredis 扩展（二）

    本文主要介绍为 PHP 安装 phpredis 扩展,并用 PHP 代码连接 Redis 服务器. 一.安装 phpredis 扩展 1. Linux.macOS 下安装 #. 下载.解压.安装.编译 ...