简单实用选项卡切换代码

浏览：630次- 评论：4次- 发布时间：2020-11-14

Html

Css

;(function($) {
    var Tab = function(opt) {
        this.oTab = opt.oTab;
        this.oTabList = opt.oTabList;
        this.oTabItem = opt.oTabItem;
        this.oTabContentInfo = opt.oTabContentInfo;
    }

$.extend(Tab.prototype, {
        init: function() {
            this.bindEvent();
        },

bindEvent: function() {
            this.oTabList.on('click', this.oTabItem, $.proxy(this.tabSlide, this))
        },

tabSlide: function(e) {
            var e = e || window.event,
                tar = e.target || e.srcElement,
                curIdx = $(tar).index();
            //等同于 Array.prototype.indexOf.call(tar.parentNode.children, tar)

if (tar.className == 'tab-item') {
                $(tar).addClass('cur').siblings('.tab-item').removeClass('cur');
                this._pageSlide(curIdx)
            }
        },

_pageSlide: function(idx) {
            this.oTabContentInfo.eq(idx).addClass('active').siblings().removeClass('active')
        }
    })

window.Tab = Tab;

})(jQuery);

new Tab({
    oTab: $('#J_tab'),
    oTabList: $('.tab-list'),
    oTabItem: $('.tab-item'),
    oTabContentInfo: $('.info')
}).init()

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.7.2