我开发的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. Spring基础学习(一)—初识Spring

    一.Spring的使用 1.导入jar包 2.编写实体类 Person.java public class Person{ private String name; public void say() ...

  2. MAT（Memory Analyzer Tool）使用心得

    起因:最近在跟踪产品的性能问题,期间主要问题体现在JVM的内存回收问题,使用MAT工具进行JVM内存分析(也可对android 的应用内存分析) 问题描述: 1.部分后端服务在运行一段时间后会突然年老 ...

  3. C#委托冒泡

    委托的实现,就是编译器自行定义了一个类:有三个重要参数1.制定操作对象,2.指定委托方法3.委托链 看如下一个列子: class DelegatePratice { public static voi ...

  4. KMP算法【代码】

    废话不多说,看毛片算法的核心在于next数组. 很多地方用的都是严书上的方法来求解next数组,代码确实简洁明了,但是可能对于初学者来说不容易想到,甚至不是一下子能理解.(好了,其实我说的就是自己,别 ...

  5. Ubuntu16.04安装NVIDIA驱动时的一些坑与解决方案

    这几天在新购置的笔记本上部署工作环境,在安装NVIDIA驱动的时候遇到了不少坑,重装了很多次,在Ubuntu论坛以及其他资料源看了很多大牛的分析,最终终于解决了一个又一个问题,过程比较艰辛,所以决定写 ...

  6. java多线程基本概述（三）——同步方法

    非线程安全其实是在多个线程对同一个对象实例的变量进行并发访问的时候发生,产生的后果就是脏读,也就是取到的数据是修改过的.而线程安全就是获得的实例变量的值是经过同步处理的,从而不会出现脏读现象. 1.1 ...

  7. 【2017-04-20】Sql字符串注入式攻击与防御

    一.攻击 所谓sql字符串注入式攻击就是在用户输入界面输入一串sql语句,来改变C#中连接数据库要执行的sql语句 通过你写的程序,直接来执行我想要执行的sql语句 例如:在这么一个程序中,sname ...

  8. CF #312 E. A Simple Task 线段树

    题目链接:http://codeforces.com/problemset/problem/558/E 给一个字符串,每次对一个区间内的子串进行升序或者降序的排列,问最后字符串什么样子. 对于字符串排 ...

  9. Postmark介绍

    一. 引言 Postmark是由著名的NAS提供商NetApp开发,用来测试其产品的后端存储性能. Postmark主要用于测试文件系统在邮件系统或电子商务系统中性能,这类应用的特点是:需要频繁.大量 ...

  10. TypeScript入门-泛型

    泛型 要创建一个可重用的组件,其中的数据类型就必须要兼容很多的类型,那么如何兼容呢,TypeScript提供了一个很好的方法:泛型 Hello World 要兼容多种数据格式,可能会有人想到any,即 ...