先上效果图：

直接上代码：

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. 【bzoj4240】有趣的家庭菜园

    只要统计每一个左右分别有多少比他高的去min,然后求和 #include<algorithm> #include<iostream> #include<cstdlib&g ...

  2. DELPHI中的消息处理机制（三种消息处理方法的比较，如何截断消息）

    DELPHI中的消息处理机制 Delphi是Borland公司提供的一种全新的WINDOWS编程开发工具.由于它采用了具有弹性的和可重用的面向对象Pascal(object-orientedpasca ...

  3. STM32的低功耗设置

    因为产品需求,系统功耗是一个很重要的考虑方面.好好看下STM32F103的低功耗问题,以便编写驱动. 1.STM32的电源 1.1 STM32电源框图 上面的电源中需要注意的是后备供电区域,这个部分由 ...

  4. iOS开发UIScrollView常见属性和方法

    一.ScrollView常用方法和属性 @property(nonatomic)CGPoint contentOffset; 设置滚动的偏移量 @property(nonatomic)CGSize c ...

  5. Vijos P1389婚礼上的小杉

    背景 小杉的幻想来到了经典日剧<求婚大作战>的场景里……他正在婚礼上看幻灯片,一边看着可爱的新娘长泽雅美,一边想,如果能再来一次就好了(-.-干嘛幻想这么郁闷的场景……). 小杉身为新一代 ...

  6. Uboot中start.S源码的指令级的详尽解析【转】

    本文转载自:http://www.crifan.com/files/doc/docbook/uboot_starts_analysis/release/html/uboot_starts_analys ...

  7. hihocoder #1068 : RMQ-ST算法 ( RMQ算法 O(nlogn)处理 O(1)查询 *【模板】 1)初始化d数组直接读入+计算k值用数学函数log2()==*节约时间 )

    #1068 : RMQ-ST算法 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho在美国旅行了相当长的一段时间之后,终于准备要回国啦!而在回国之前,他们准备 ...

  8. JavaScript页面刷新与弹出窗口问题的解决方法

    1. [代码][JavaScript]代码     ​一.无提示刷新网页 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点“确定”才会刷新.而有的页面不会提示,不弹出提示窗口,直接就刷新了 ...

  9. topcoder 的一些输入输出格式

    自从上年的11月份参加过TC的比赛后,就再也没有参加了,因为它的输入输出格式比较难接受,还有它的页面字体比较小,看得我很辛苦...藉口藉口--懒而已!不过以后我会尽量去参加的,为了提高自己的编程能力. ...

  10. 2014山东省“浪潮杯”第五届ACM省赛总结

    一次比赛做一次总结,弱菜又来总结了…… 我这种大四的又死皮赖来混省赛了,貌似就我和山大威海的某哥们(不详其大名)了吧.颁奖前和他聊天,得知他去百度了,真是不错,ORZ之. 比赛流水账: 题目目前不知道 ...