tab標(biāo)簽切換多種方法

今天更新一個(gè)tab標(biāo)簽切換的方法，是使用jquery庫(kù)實(shí)現(xiàn)的，第一種流水形式，但是怎么能滿足呢，要往更高的一層技術(shù)邁進(jìn)，實(shí)現(xiàn)了jquery插件的封裝。
先看第一種，原理很簡(jiǎn)單，就不在贅述了，只是交流一下模塊化開(kāi)發(fā)的經(jīng)驗(yàn)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js" type="text/javascript"></script>
    <style type="text/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;
        }
    </style>
</head>

<body>
<div class="bar">
    <ul>
        <li><a href="#" class="select">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
    </ul>
</div>
<div class="container">
    <div class="contentBox"><img src="image/1.jpg" alt=""/></div>
    <div class="contentBox"><img src="image/2.jpg" alt=""/></div>
    <div class="contentBox"><img src="image/3.jpg" alt=""/></div>
    <div class="contentBox"><img src="image/4.jpg" alt=""/></div>
</div>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        var list=$(".bar ul li a");
        var content=$(".contentBox");
        var time;
        var flag=0;
        var now;
        var nowNumber;
        var move= function () {
            time=setInterval(function () {
                flag++;
                for(var i=0;i<list.length;i++){
                    list.eq(i).removeClass("select");
                    content.eq(i).css({display:'none'});
                }
                if(flag>3){
                    flag=0;
                    list.eq(flag).addClass("select");
                    content.eq(flag).css({display:'block'});
                }else{
                    list.eq(flag).addClass("select");
                    content.eq(flag).css({display:'block'});
                }
            },1000);
        };
        list.hover(function () {
            clearInterval(time);
            now=$(this);
            nowNumber=list.index(now);
            list.removeClass("select");
            $(this).addClass("select");

            content.css({display:'none'});
            content.eq(nowNumber).css({display:'block'});
        }, function () {
            nowNumber=list.index($(this));
            flag=nowNumber;
            move();
        });
        move();
        content.hover(function () {
            clearInterval(time);
        }, function () {
            move();
        });
    })
</script>
</html>

第二種是jquery 插件開(kāi)發(fā)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js" type="text/javascript"></script>
    <style type="text/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;
        }
    </style>
</head>
<body>
<div class="bar">
    <ul>
        <li><a href="#" class="select">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
    </ul>
</div>
<div class="container">
    <div class="contentBox"><img src="image/1.jpg" alt=""/></div>
    <div class="contentBox"><img src="image/2.jpg" alt=""/></div>
    <div class="contentBox"><img src="image/3.jpg" alt=""/></div>
    <div class="contentBox"><img src="image/4.jpg" alt=""/></div>
</div>
</body>
<script type="text/javascript">
    (function ($) {
        $.fn.tabs= function (options) {
            var that=this;
            var flag=0;
            var time=null;
            var index=null;
            var defalut={
                deplay:1000,
            };
            var setting= $.extend(defalut,options);
            var tab={
                play: function () {
                    var _that_=this;
                    _that_.list=$(".bar ul li a");
                    _that_.contentBox=$(".contentBox");
                    _that_.autoPlay( _that_.list,_that_.contentBox);
                    _that_.hover1(_that_.list,_that_.contentBox);
                    _that_.hover2(_that_.list,_that_.contentBox);
                },
                /*運(yùn)行函數(shù)*/
                autoPlay: function (element1,element2) {
                    var _that_=this;
                    time=setInterval(function () {
                        var len=element1.length;
                        flag++;
                        for(var i=0;i<len;i++){
                            element1.eq(i).removeClass("select");
                            element2.eq(i).css({display:'none'});
                        }
                        flag=flag%len;
                        element1.eq(flag).addClass("select");
                        element2.eq(flag).css({display:'block'});
                    },defalut.deplay);

                },
                hover1: function (element1,element2) {
                    var _that_=this;
                    element1.hover(function () {
                        clearInterval(time);
                        var now=$(this);
                        index=element1.index(now);
                        element1.removeClass("select");
                        element2.css({display:'none'});
                        element1.eq(index).addClass("select");
                        element2.eq(index).css({display:'block'});
                    }, function () {
                        flag=index;
                        clearInterval(time);
                        _that_.autoPlay(element1,element2);
                    })
                },
                hover2: function (element1,element2) {
                    var _that_=this;
                    element2.hover(function () {
                        clearInterval(time);
                    }, function () {
                        clearInterval(time);
                        _that_.autoPlay(element1,element2);
                    })
                }
            };
            return this.each(function () {
                tab.play();
            })
        }
    })(jQuery);
    $(".bar").tabs();
</script>
</html>

一定不要忘了，把插件的內(nèi)部的執(zhí)行函數(shù)return出來(lái)，并且使用this.each(function () {....} )
這樣才會(huì)給每個(gè)符合的jquery對(duì)象上實(shí)現(xiàn)插件的效果

第三種方法：將要實(shí)現(xiàn)RequireJS的實(shí)現(xiàn)方法
讓大家久等了，來(lái)更新了，這個(gè)使用requirejs寫的，應(yīng)該很好理解，如果不明白，請(qǐng)看我requirejs那個(gè)例子哦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="js/require.js" data-main="js/main"></script>
    <link rel="stylesheet" href="style/style.css"/>
</head>
<body>
<div class="bar">
    <ul>
        <li><a href="#" class="select">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
    </ul>
</div>
<div class="container">
    <div class="contentBox"><img src="image/1.jpg" alt=""/></div>
    <div class="contentBox"><img src="image/2.jpg" alt=""/></div>
    <div class="contentBox"><img src="image/3.jpg" alt=""/></div>
    <div class="contentBox"><img src="image/4.jpg" alt=""/></div>
</div>
</body>
</html>

下面是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();
});

下面兩個(gè)分別是tab切換函數(shù)的封裝和啟動(dòng)函數(shù)

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;
});
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容