jQuery封裝的tab組件（可選自動+可選延遲處理+按需載入）

效果圖 tab2.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>tab2按需載入</title> <link rel="stylesheet" href=".. ...

效果圖

tab2.html

<!DOCTYPE html>
<html lang="zh-CN"><!-- 設置簡體中文 -->
<head>
    <meta charset="UTF-8">
    <title>tab2按需載入</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/tab2.css">
    <!-- css一般放在DOM載入前，防止DOM裸奔 -->
</head>
<body>
    <!-- 樓層一 -->
    <div class="floor">
        <div class="container">
            <div class="tab-head">
                <div class="tab-head-title fl">
                    <span class="tab-head-title-num">1F</span><span class="tab-head-title-name">服裝箱包</span>
                </div>
                <ul class="tab-head-item-wrap fr">
                    <li class="fl"><a href="javascript:;" class="tab-head-item tab-head-item-active">大牌</a></li>
                    <li class="fl tab-head-item-divider text-hidden">分割線</li>
                    <li class="fl"><a href="javascript:;" class="tab-head-item">男裝</a></li>
                    <li class="fl tab-head-item-divider text-hidden">分割線</li>
                    <li class="fl"><a href="javascript:;" class="tab-head-item">女裝</a></li>
                </ul>
            </div>
            <div class="tab-body">
                <ul class="tab-body-panel">
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/1/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/1/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/1/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/1/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/1/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/1/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                </ul>
                <ul class="tab-body-panel">
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/2/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/2/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/2/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/2/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/2/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/2/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                </ul>
                <ul class="tab-body-panel">
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/3/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/3/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/3/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/3/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/3/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                    <li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" data-src="../img/floor/1/3/1.png" class="floor-img"></a></p>
                        <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p>
                        <p class="tab-body-panel-item-price">￥479</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script src="../js/jquery.js"></script>
    <script src="../js/transition.js"></script>
    <script src="../js/showhide.js"></script>
    <script src="../js/tab2.js"></script>
</body>
</html>

base.css https://www.cnblogs.com/chenyingying0/p/12363689.html

tab2.css

/*common*/
    .container{
        width:1200px;
        margin:0 auto;
    }
    .link{
        color:#4d555d;
    }
    a.link:hover{
        color:#f01414;
    }
    .fl{
        float:left;
    }
    /*文字隱藏*/
    .text-hidden{
        text-indent:-9999px;
        overflow:hidden;
    }
/*showhide*/
    .fadeOut{
        opacity: 0;
        visibility: hidden;
    }
    .slideUpDownCollapse{
        height:0 !important;/*避免因為優先順序不夠而無法生效*/
        padding-top:0 !important;
        padding-bottom:0 !important;
    }
    .slideLeftRightCollapse{
        width:0 !important;/*避免因為優先順序不夠而無法生效*/
        padding-left:0 !important;
        padding-right:0 !important;
    }

/*floor樓層區域*/
    .floor{
        margin-top:7px;
    }
    .tab-head{
        height:68px;
        border-bottom:1px solid #f01414;
    }
    .tab-head-title{
        margin-top:22px;
    }
    .tab-head-title-num{
        display: inline-block;
        width:24px;
        height:24px;
        border-radius:50%;
        background-color:#07111b;
        color:#fff;
        text-align: center;
        line-height:24px;
        margin-right:10px;
    }
    .tab-head-title-name{
        font-size:20px;
        color:#07111b;
        position: relative;
        top:3px;
    }
    .tab-head-item-wrap{
        margin-top:8px;
        height:62px;
        line-height:62px;
    }
    .tab-head-item{
        display: inline-block;
        font-size:14px;    
        color:#93999f;
        margin-right:16px;
    }
    .tab-head-item-active{
        color:#f01414;
        background:url(../img/floor-arrow.png) center bottom no-repeat;
    }
    .tab-head-item-divider{
        display: inline-block;
        width:1px;
        height:14px;
        background-color:#d9dde1;
        margin-top:21px;
        margin-right:16px;
    }
    .tab-body{
        height:233px;
    }
    .tab-body-panel{
        height:466px;
        display: none;
    }
    .tab-body-panel-item{
        width:200px;
        height:233px;
        text-align: center;
    }
    .tab-body-panel-item:hover{
        box-shadow:0 0 10px rgba(0,0,0,.2);
    }
    .tab-body-panel-item-pic{
        margin-top:24px;
    }
    .tab-body-panel-item-name{
        margin-top:23px;
        font-size:12px;
        color:#07111b;
    }
    .tab-body-panel-item-price{
        margin-top:9px;
        font-size:14px;
        color:#f01414;
    }

transition.js https://www.cnblogs.com/chenyingying0/p/12363649.html

showhide.js https://www.cnblogs.com/chenyingying0/p/12363707.html

tab2.js

(function($){
    "use strict";

    function Tab(elem,options){
        this.elem=elem;
        this.options=options;

        this.items=this.elem.find(".tab-head-item");//tab選項卡
        this.panels=this.elem.find(".tab-body-panel");//tab選項面板
        this.tabNum=this.items.length;//tab選項數量
        this.curIdx=this._getIdx(this.options.activeIdx);//當前選項卡索引

        this._init();//初始化
    }

    //預設參數
    Tab.defaults={
        event:"mouseenter",//click
        css3:false,
        js:false,
        animation:"fade",
        activeIdx:0,
        interval:0,
        delay:0//是否延遲
    };

    Tab.prototype._init=function(){
        var self=this;
        var timer=null;

        //init show
        this.items.removeClass("tab-head-item-active");
        this.items.eq(this.curIdx).addClass("tab-head-item-active");//指定item添加樣式
        this.panels.eq(this.curIdx).show();//指定panel顯示

        //trigger event
        this.panels.on("show shown hide hidden",function(e){
            self.elem.trigger("tab-"+e.type,[e.type,self.panels.index(this),this]);
            //傳遞的參數：事件類型 觸發事件的索引，觸發事件的元素
        })

        //showHide init
        this.panels.showHide(this.options);

        //bind event
        this.options.event=this.options.event==="click"?"click":"mouseenter";
        //事件代理，替被點擊的tab項做代理
        this.elem.on(this.options.event,".tab-head-item",function(){
            var elem=this;//elem指向被點擊的那個.tab-head-item

            if(self.options.delay){