1

jQuery 用の小さなタブ プラグインを作成しました。

(function ($) {
var d = {
        panelSelector   : '.tab-panel',
        navSelector     : '.tab-nav',
        fromAttr        : 'href',
        toAttr          : 'id',
        startIndex      : 0,
        classActive     : 'on',
        onEvent         : 'click',
        stripHash       : true
    };

var methods = {

    init: function (options) {

        $.extend(d, options);

        return this.each(function () {

            var parent = $(this);

            parent.tabs('showTab', d.startIndex);

            $(d.navSelector + ' a', parent).on(d.onEvent, function (e) {
                e.preventDefault();
                parent.tabs('showTab', $(this).attr(d.fromAttr));
            });
        });         

    },

    showTab: function (tab, parent, options) {

        $.extend(d, options);

        return this.each(function () {

            var element = '',
                hash = '=';

            if (tab === parseInt(tab)) {
                element = $(d.panelSelector + ':eq(' + tab + ')', $(this));
            } else {

                if (d.stripHash) {
                    tab = tab.replace('#', '');
                }
                element = $(d.panelSelector + "[" + d.toAttr + "=" + tab + "]", $(this));

            }

            if (d.stripHash) {
                hash = '=#';
            }

            $(d.navSelector + " a[" + d.fromAttr + hash + element.attr(d.toAttr) + "]", $(this)).addClass(d.classActive).siblings().removeClass(d.classActive);
            element.show().siblings(d.panelSelector).hide();

        });

    }
}

$.fn.tabs = function (method) {

    if ( methods[method] ) {
        return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {      
        return methods.init.apply( this, arguments );
    } else {
        $.error( 'Method ' +  method + ' does not exist.' );
    }
}

})(jQuery);

同じページに複数の要素がある場合でも、うまく機能します。しかし、もう一度実行しようとすると (たとえば、2 つの異なるオプション セットの場合)、すべてが壊れます。ヒントはありますか?

複数の.tabs要素がある場合でも、これは正常に機能します。

$(".tabs").tabs();

これはすべてを壊します:

$(".tabs").tabs();
$(".alt-tab").tabs();

ありがとう!

4

0 に答える 0