先上效果图：

直接上代码：

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo</title>

    <script src='jquery.js'></script>

    <script src='tab.js'></script>

    <style>

        *{margin:0px;padding:0px;background-color: #757575}

        .tab{margin-left: 100px;margin-top: 100px;height: 250px;}

        .tab .tab-ul{height: 30px;}

        .tab .tab-ul .tab-li{float:left;margin-right: 5px;list-style: none; background-color: #323232;color: #fff;display: block;width: 50px;border-radius: 5px 5px 0 0 ;text-align: center;cursor: pointer;}

        .tab .tab-ul .active{color: #323232;  background-color: #fff;}

        .tab .content-warp{width: 200px;height: 200px;background-color: #fff;overflow: hidden;padding:5px;}

        .tab .content-warp .content{width: 200px;height: 200px;display: none}

        .tab .content-warp .content img{width:100%;height: 100%;}

        .tab .content-warp .current{display: block}

    </style>

</head>

<body>

    <div class="tab" data-config='{

            "event":"click",

            "time":false,

            "type":"default"

        }'>

        <ul class="tab-ul">

            <li class="tab-li active">新闻</li>

            <li class="tab-li">热点</li>

            <li class="tab-li">军事</li>

            <li class="tab-li">社会</li>

        </ul>

        <ul class="content-warp">

            <li class="content current"><img src="img/1.jpg"></li>

            <li class="content"><img src="img/2.jpg"></li>

            <li class="content"><img src="img/3.jpg"></li>

            <li class="content"><img src="img/4.jpg"></li>

        </ul>

    </div>

    <div class="tab" data-config='{

            "event":"mouseover",

            "time":false,

            "type":"fade"

        }'>

        <ul class="tab-ul">

            <li class="tab-li active">新闻2</li>

            <li class="tab-li">热点2</li>

            <li class="tab-li">军事2</li>

            <li class="tab-li">社会2</li>

        </ul>

        <ul class="content-warp">

            <li class="content current"><img src="img/1.jpg"></li>

            <li class="content"><img src="img/2.jpg"></li>

            <li class="content"><img src="img/3.jpg"></li>

            <li class="content"><img src="img/4.jpg"></li>

        </ul>

    </div>

    <div class="tab" data-config='{

            "event":"click",

            "time":3000,

            "type":"fade"

        }'>

        <ul class="tab-ul">

            <li class="tab-li active">新闻2</li>

            <li class="tab-li">热点2</li>

            <li class="tab-li">军事2</li>

            <li class="tab-li">社会2</li>

        </ul>

        <ul class="content-warp">

            <li class="content current"><img src="img/1.jpg"></li>

            <li class="content"><img src="img/2.jpg"></li>

            <li class="content"><img src="img/3.jpg"></li>

            <li class="content"><img src="img/4.jpg"></li>

        </ul>

    </div>

<script>

    $(".tab").tab();

</script>

</body>

</html>

插件tab.js!function(    var Tab = function(ele){

this.ele = ele;

        config = JSON.parse(ele.attr('data-config'));

        //默认配置

        this.config = {

            "event":"mouseover",//触发事件

            "time":2000,//切换时间 false 为不切换

            "invoke":1,//默认tab

            "type":"default"//切换方式 默认和淡出

        };

        $.extend(this.config, config);

        //默认地址

        this.index = this.config.invoke;

        //点击事件

        this.switch();

        //默认显示

        this.invoke();

        //轮播

        this.loopfun();

    };

    Tab.prototype  = {

        "switch":function(){

            ele = this.ele;

            var that = this;

            config = this.config;

            event = config.event == "click"?"click":"mouseover";

            if(config.type == "default"){

                ele.find(".tab-li").on(event, function(e, par1){

                    //par1存在则为模拟请求

                    $(this).addClass("active").siblings().removeClass("active");//tab

                    var index = $(this).index();

                    that.ele.find(".content").eq(index).show().addClass("current").siblings().removeClass("current").hide();

                    if(that.loop && !par1){

                        clearInterval(that.loop);

                        that.loop = null;

                    }

                    that.addIndex(index);

                }).on('mouseout', function(){

                    if(!that.loop){

                        that.loopfun();

                    }

                });

            }else{

                ele.find(".tab-li").on(event, function(e, par1){

                    //par1存在则为模拟请求

                    $(this).addClass("active").siblings().removeClass("active");//tab

                    var index = $(this).index();

                    that.ele.find(".content").eq(index).fadeIn().siblings().fadeOut();

                    if(that.loop && !par1){

                        clearInterval(that.loop);

                    }

                    that.addIndex(index);

                }).on('mouseout', function(){

                    that.loopfun();

                });

            }

        },

        "invoke":function(){

            ele = this.ele;

            config = this.config;

            ele.find('.tab-li').eq(config.invoke-1).addClass("active").siblings().removeClass("active");

            ele.find('.content').eq(config.invoke-1).addClass("current").siblings().removeClass("current");

        },

        "addIndex":function(index){

            var count = this.ele.find('.tab-li').length;

            if(++index>=count){

                this.index = 0;

            }else{

                this.index = index;

            }

        },

        "loopfun":function(){

            if(this.config.time && parseInt(this.config.time)){

                that = this;

                this.loop = setInterval(function(){

                    event = that.config.event == "click"?"click":"mouseover";

                    that.ele.find(".tab-li").eq(that.index).trigger(event, ['tri']);

                }, that.config.time)

            }

        }

    }

    //注册成jquery方法

    $.fn.extend({

        tab:function(){

            this.each(function(){

                new Tab($(this))

            })

            return this;

        }

    })

    window.Tab = Tab;

}(jQuery)

标签可随意设置成文本或其他内容，可自行修改。

依自己的理解对切换逻辑进行修改：

1.mousove触发切换时只有mouseout才会继续轮训切换

2.click触发切换时当鼠标在切换页也只有mouseout才会继续轮训切换

代码托管地址：https://github.com/yimijianfang/tab

封装jQuery插件实现TAB切换的更多相关文章

  1. 自己编写jQuery插件之Tab切换

    自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...

  2. 封装jQuery插件的步骤

    引语:jQuery提供了很多插件,我们在开发的过程使用插件能节省时间简化开发也避免从头开始编写每个组件,单我们除了懂得使用别人已编写好的插件以外,也到懂得如何封装属于我们自己的插件,以下就是封装jQu ...

  3. 封装jquery插件

    最近要到使用别的jquery插件,但部分功能并不能满足,为满足功能,只能对插件进行修改来满足,要修改插件,先要了解插件如何封装, 明白了如何封装插件,才能更好修改插件:如何封装插件? 1.插件封装类型 ...

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

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

  5. jquery写的tab切换效果 非常简单

    自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...

  6. jquery时间轴tab切换效果实现结合swiper实现滑动显示效果

    需求:根据时间轴进行tab页面内容切换(时间轴需要滑动查看并选择) 实现思路: 结合swiper插件实现滑动显示效果 根据transform: translateX进行左侧切换效果的实现(具体实现cs ...

  7. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  8. Jquery实现横向tab切换

    //需求:鼠标放在不同的导航栏上,下面显示的内容自动切换 //代码如下 <!DOCTYPE html> <html lang="en"> <head& ...

  9. jQuery 练习：tab 切换

    实现内容随菜单切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. 关于MP4视频拖动的原理与分析（一）

    本来想说说关于mp4和一些常见视频文件格式方面的历史. 如今想想没啥必要.毕竟本文是在讲关于mp4点播拖动方面的技术细节. 绪论,前言神马的显得有点多余. 说起MP4.不得不提"Digita ...

  2. iOS 开发之 - 关闭键盘 退出键盘 的5种方式

    iOS 开发之 - 关闭键盘 退出键盘 的5种方式   1.点击编辑区以外的地方(UIView) 2.点击编辑区域以外的地方(UIControl) 3.使用制作收起键盘的按钮 4.使用判断输入字元 5 ...

  3. 用python编写的简易端口扫描器

    #coding = utf-8 ''' python 3.4 通过简单的TCP端口连接来判断指定IP是否开放了指定端口. ''' import socket import optparse impor ...

  4. 高仿webqq做的一个webos桌面效果和web聊天工具，桌面效果完好，功能强大

    QQ技术交流群:159995692 /--------   暂时开放的測试       帐号/password:[88888888/1;666666/1]    ---------/ 正如大家所知的E ...

  5. 在Java中如何正确地终止一个线程

    1.使用Thread.stop()? 极力不推荐此方式,此函数不安全且已废弃,具体可参考Java API文档 2.设置终止标识,例如: import static java.lang.System.o ...

  6. linux 查看权限

    参考文章:http://www.linuxidc.com/Linux/2014-10/108114.htm Linux文件访问权限分为可读,可写和可执行三种. 可用ls -l命令查看,例: ls -l ...

  7. 关于树论【动态树问题（LCT）】

    搬运:看一道caioj1439 题目描述 一开始给你一棵n个点n-1条边的树,每个点有一个权值wi. 三种操作: op=1 u v :在点u和点v之间建一条边. op=2 u v:摧毁点u到点v之间的 ...

  8. YTU 2457: 很简单的一道题

    2457: 很简单的一道题 时间限制: 1 Sec  内存限制: 128 MB 提交: 261  解决: 80 [提交][状态][讨论版] 题目描述 有一个简单的函数数学公式,如下 输入 重复输入多组 ...

  9. 【NOIP2014】 联合权值

    [题目链接] 点击打开链接 [算法] 如果(u,v)的距离为2,那么有两种可能 : 1.u和v为祖孙关系 2.u和v为兄弟关系 树形DP即可,详见代码 [代码] #include<bits/st ...

  10. 【转】IntelliJ IDEA2017.3激活

    原文地址:https://blog.csdn.net/qq_27686779/article/details/78870816 http://idea.java.sx/ 简单快捷!! ———————— ...