タブ切り替え機能を実装するJavaScriptカスタムプラグイン

<script src="jquery-3.1.0.js"></script>
    <script src="plugs/demo01.js"></script>
    <スタイル>
        #タブ>div{
            高さ: 200px;
            幅: 200ピクセル;
            背景色: ピンク;
            表示: なし;
        }
        #タブ div.div-active{
            表示: ブロック;
        }
        .btn-アクティブ{
            背景色: オレンジ;
        }
</スタイル>

(関数 ($) {
 //タブプラグイン $.fn.tabs = function (options) {
        デフォルト = {
            アクティブインデックス:1,
            titleActive:"btn-active",
            contentActive:"div-active",
            属性:"rel"
        }
        /*パラメータをマージ*/
        $.extend(デフォルト、オプション);
        /*すべてのボタンを取得*/
        btns = this.find("["+defaults.attr+"]"); とします。
        /*relの値を取得する*/
        rels = [] とします。
        btns.each(関数 (インデックス,要素) {
            rels.push($(要素).attr(defaults.attr));
        });
        /*すべてのdivを取得*/
        divs = this.find(rels.toString()); とします。
        /* 指定された添え字が範囲外かどうかをチェックします*/
        if (defaults.activeIndex > btns.length-1) {
            デフォルト.activeIndex = 0;
        }
        /*デフォルトの表示内容を設定する*/
        btns.eq(defaults.activeIndex).addClass(defaults.titleActive);
        divs.eq(defaults.activeIndex).addClass(defaults.contentActive);
        /*ボタンにクリックイベントをバインドする*/
        btns.click(関数() {
            $(this).addClass(defaults.titleActive)
                .siblings().removeClass(defaults.titleActive);
            divs.eq($(this).index()).addClass(defaults.contentActive)
                .siblings().removeClass(defaults.contentActive);
        });
    }
})(jQuery);