tab标签切换多种方法

今天更新一个tab标签切换的方法，是使用jquery库实现的，第一种流水形式，但是怎么能满足呢，要往更高的一层技术迈进，实现了jquery插件的封装。
先看第一种，原理很简单，就不在赘述了，只是交流一下模块化开发的经验。

    
    
    
    




    

        
one
        
two
        
three
        
four
    


    

    

    

    

第二种是jquery 插件开发

    
    
    
    



    

        
one
        
two
        
three
        
four
    


    

    

    

    

一定不要忘了，把插件的内部的执行函数return出来，并且使用this.each(function () {....} )
这样才会给每个符合的jquery对象上实现插件的效果

第三种方法：将要实现RequireJS的实现方法
让大家久等了，来更新了，这个使用requirejs写的，应该很好理解，如果不明白，请看我requirejs那个例子哦！

    
    
    
    
    



    

        
one
        
two
        
three
        
four
    


    

    

    

    

下面是css文件

*{
    padding: 0;
    margin: 0;
}
.bar{
    width: 500px;
    height: 50px;
    border: 1px solid black;
}
.bar ul li {
    list-style-type: none;
    float: left;
}
.bar ul li a {
    width: 70px;
    display: block;
    text-decoration: none;
    height: 30px;
    margin: 10px;
    text-align: center;
    line-height: 30px;
    float: left;

}
.select{
    background: red;
}
.container {
    width: 200px;
    height: 200px;
    border: 1px solid blue;
}
.container .contentBox{
    display: none;
}

.container .contentBox img{
    width: 200px;
    height: 200px;
}

下面是main入口文件

require.config({
    baseUrl:'js/',
    paths: {
        jquery: 'jquery-2.1.4.min'
    }
});

require(["jquery","b","a"],function($,fun,tab){
    fun();
});

下面两个分别是tab切换函数的封装和启动函数

define(['jquery','a'], function ($,tab) {
    var move= function () {
        tab.play($(".bar ul li a"),$(".contentBox"));
    };
    return move();
});

define(['jquery'], function ($) {
        var tab={
            time:null,
            flag:0,
            number:0,
            play: function (element1,element2) {
                this.autoPlay(element1,element2);
                this.hover1(element1,element2);
                this.hover2(element1,element2);
            },
            autoPlay: function (element1,element2) {
                var that=this;
                that.time=setInterval(function (){
                    element1.removeClass("select");
                    element2.css({display:'none'});
                    that.flag++;
                    that.flag=that.flag%4;
                    element1.eq(that.flag).addClass("select");
                    element2.eq(that.flag).css({display:'block'});
                },1000)
            },
            hover1: function (element1, element2) {
                var that=this;
                element1.hover(function () {
                    clearInterval(that.time);
                    that.number=element1.index($(this));
                    element1.removeClass('select');
                    element2.css({display:'none'});
                    element1.eq(that.number).addClass('select');
                    element2.eq(that.number).css({display:'block'});
                }, function () {
                    clearInterval(that.time);
                    that.flag=that.number;
                    that.autoPlay(element1,element2);
                });
            },
            hover2: function (element1, element2) {
                var that=this;
                element2.hover(function () {
                    clearInterval(that.time);
                }, function () {
                    clearInterval(that.time);
                    that.autoPlay(element1, element2);
                })
            }
        };
    return tab;
});