通用tab切換效果

//tab切換
        tabFunc: function(config) {

             //tab默認屬性
        var defaults = {

            main: ".J-tab", //tab最外層盒子的class

            menu: ".J-tab-menu", //ul的class

            content: ".J-tab-content", //內容區域外層盒子class

            cont_child: ".J-panel",

            eventtype: "mouseover", //事件名稱

            select: "z-select" //標籤選中class

        };

        //合併外部對象
        var option = $.extend({}, defaults, config);

        var J_tab = option.main,
            J_menu = option.menu,
            J_content = option.content,
            J_cont_child = option.cont_child,
            J_event = option.eventtype,
            J_select = option.select,
            timer = null;

        $(J_tab).each(function() {

            var self = $(this);
            /*
                self_menu = self.find(J_menu),

                self_content = self.find(J_content);*/


            self.on(J_event, J_menu + " li", function() {//爲了實現綁定的事件在dom元素以前就加載了，一樣能夠實現tab切換

                clearTimeout(timer);

                var that = $(this),

                    index = that.index();

                timer = setTimeout(function() {

                    that.addClass(J_select).siblings().removeClass(J_select);

                    self.find(J_content).find(J_cont_child).eq(index).removeClass('hide').siblings(J_cont_child).addClass('hide');

                }, 300);

            });

        });

        }

 

調用：

            this.tabFunc();

            this.tabFunc({
                cont_child: "dl"
            });

 

 

DOM結構參考：

 

               <div class="u-mc-new u-bc-tab  J-tab oh">
                    <ul class="t-nav  J-tab-menu oh">
                        <li class=" z-select"><a href="javascript:void(0)">寶寶生日禮物</a></li>
                        <li class="z-no-br"><a href="javascript:void(0)">每週推薦</a></li>
                    </ul>
                    <div class="t-cont  J-tab-content oh clearfix">                         <dl>                             <dt>                                 <a href="#"><img src="../assets/images/80x80.png" height="80" width="80" alt title></a>                             </dt>                             <dd class="name">                                 <a href="#" title="">子月唐月子米酒水月子月子水餐月子米酒水月子月子水月子 </a>                             </dd>                             <dd class="f-btn">                                 <a href="#">免費領取</a>                             </dd>                         </dl>                         <dl class="hide">                             <dt>                                 <a href="#"><img src="../assets/images/80x80.png" height="80" width="80" alt title></a>                             </dt>                             <dd class="title">                                 <a href="#" title="">選好奶粉先懂養分 </a>                             </dd>                             <dd class="para">                                 <a href="#" title="">美滋致粹系列中這 如鑽石通常閃耀的 3大科學養分元... </a>                             </dd>                         </dl>                     </div>                 </div>