先上效果图：

直接上代码：

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. DB主从一致性的几种解决方法

    https://www.cnblogs.com/KunLunSu/p/6826247.html

  2. Monkey测试的参数

    一.Monkey测试简介 Monkey测试是Android平台自动化测试的一种手段,通过Monkey程序模拟用户触摸屏幕.滑动Trackball.按键等操作来对设备上的程序进行压 力测试,检测程序多久 ...

  3. 嵌入式开发之davinci---8148/8127/8168 中dsp c674的浮点和定点兼容

    c674: 是c67(浮点)+c64(定点) 兼容的 http://processors.wiki.ti.com/index.php/-mv_option_to_use_with_the_C674x ...

  4. JAVA学习第六十五课 — 正則表達式

    正則表達式:主要应用于操作字符串.通过一些特定的符号来体现 举例: QQ号的校验 6~9位.0不得开头.必须是数字 String类中有matches方法 matches(String regex) 告 ...

  5. T-SQL查询进阶--变量

    概述 变量对于一种语言是必不可少的一部分,当然,对于T-SQL来讲也是一样.在简单查询中,往往很少用到变量,但无论对于复杂的查询或存储过程中,变量都是必不可少的一部分. 变量的种类 在T-SQL中,变 ...

  6. java File文件操作共用方法整理

    package org.jelly.util; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io ...

  7. js获取三天后的日期

    js获取三天后的日期 setDate getNowAddTreeFormatDate() { var date = new Date(); date.setDate(date.getDate()+3) ...

  8. 关于 SWT 的UI线程和非UI线程

    要理解UI线程,先要了解一下“消息循环”这个概念.链接是百度百科上的条目,简单地说,操作系统把用户界面上的每个操作都转化成为对应的消息,加入消息队列.然后把消息转发给对应的应用程序(一般来说,就是活动 ...

  9. 关于animate的一些属性

    animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 " ...

  10. Kafka使用kclient三种使用方法

    kclient提供了三种使用方法,对于每一种方法,按照下面的步骤可快速构建Kafka生产者和消费者程序. 前置步骤1) 下载源代码后在项目根目录执行如下命令安装打包文件到你的Maven本地库. mvn ...