通用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>

 

 

转载于:https://www.cnblogs.com/jiet/p/4955342.html