https://www.orico.co.jp/support/procedure/online_account/bank/select/js/disp_switch_btn.js

1(function (document, $) {
2    'use strict';
3
4    const $scrollElement = $(document.scrollingElement || 'html');
5
6    // ----------------------------------------------------------------------------------
7    // DispSwitchBtn
8    // ボタン（liのなかのaリンク）で表示を切り替える
9    //
10    // ＜機能概要＞
11    // - 選択したボタン（liのなかのaリンク）が指定するidを持つ要素を表示させ、他のボタンが指定するidを持つ要素は非表示にする。
12    //   ※デフォルトではすべてを非表示にする。
13    //   ※idはhrefの値で『#xxxx』のように指定。通常のURLだった場合はそのままページ遷移する。
14    // - 選択したボタンはカレント表示する。
15    // - URLクエリ文字列を取得して、そこで指定されたkeyの値と同じ値を持つボタンを選択された状態にする。
16    //
17    // ＜run() で設定できるインスタンスのオプションの説明＞
18    // {
19    //     classCurrent : 'is-active'  // カレント用のclass名
20    //     $elem : $('ul#js-disp-switch'),  // 機能を実装する要素自体
21    //     urlQueryKey : ''  // URLクエリ文字列のkey名（※空白の場合、URLクエリ文字列からの値を取得しない）
22    // }
23    //
24    // ＜実装例＞
25    //
26    // // HTML =================================
27    // <head>内でこのJSを読み込み
28    //
29    // ...（省略）...
30    //
31    // <ul id="js-disp-switch">
32    // <li><a href="#target-01">01</a></li>
33    // <li><a href="#target-02">02</a></li>
34    // <li><a href="#target-03">03</a></li>
35    // </u>
36    //
37    // ...（省略）...
38    //
39    // <div id="target-01">（表示エリア01）...</div>
40    // <div id="target-02">（表示エリア02）...</div>
41    // <div id="target-03">（表示エリア03）...</div>
42    //
43    //
44    // // このJS内の実行文 =================================
45    // ( function ($) {
46    //
47    // ...（省略）...
48    //
49    //     // 実行（ボタン（liのなかのaリンク）で表示を切り替える）
50    //     const switchBtn01 = new DispSwitchBtn(); // 生成
51    //
52    //     switchBtn01.run({ // 処理開始
53    //         $elem: $('ul#js-disp-switch'), // 機能を実装する要素自体
54    //         urlQueryKey: 'payment' // URLクエリ文字列のkey名
55    //     });
56    // }(jQuery));
57    //
58    const DispSwitchBtn = function () {
59        // ----------------------------------------------------------------------------------
60        // 設定
61
62        // インスタンス変数
63        this.option = { // default
64            classCurrent: 'is-active', // カレント用のclass名
65            $elem: {}, // 機能を実装する要素自体
66            urlQueryKey: '' // URLクエリ文字列のkey名（※空白の場合、URLクエリ文字列からの値を取得しない）
67        };
68
69        this.$switchBtn = {}; // 切り替えボタン
70        this.$switchBtnLink = {}; // 切り替えボタン（リンク）
71        this.$switchTarget = {}; // 切り替え対象（jQueryオブジェ）
72        this.idTargetArray = []; // 切り替え対象（id）を格納する配列
73        this.queryObj = {}; // URLクエリ文字列のパラメータの格納オブジェクト
74
75        return this;
76    };
77
78    DispSwitchBtn.prototype = {
79        // ----------------------------------------------------------------------------------
80        // 設定
81
82        // クラス変数
83        count: 0, // インスタンス数
84
85        // ----------------------------------------------------------------------------------
86        // 関数（public）
87
88        // 実行
89        run: function (option) {
90            this._setOption(option); // optionを設定
91            this._init(); // 初期化
92            this._setEvent(); // イベントを設定
93
94            DispSwitchBtn.prototype.count++; // インスタンス数をカウント
95        },
96
97        // インスタンス数を取得
98        getCount: function () {
99            return this.count;
100        },
101
102        // ----------------------------------------------------------------------------------
103        // 関数（private）
104
105        // optionを設定
106        _setOption: function (option) {
107            if (option) {
108                this.option = $.extend({}, this.option, option);
109            }
110        },
111
112        // 初期化
113        _init: function () {
114            let $btnLink = {};
115            let url = '';
116            let i;
117            let len;
118
119            this.$switchBtn = this.option.$elem.find('li'); // 切り替えボタンを設定
120            this.$switchBtnLink = this.$switchBtn.find('> a'); // 切り替えボタン（リンク）を設定
121            this.$switchTarget = $();
122
123            // 切り替えボタン（リンク）の内容を取得
124            for (i = 0, len = this.$switchBtnLink.length; i < len; i++) {
125                $btnLink = this.$switchBtnLink.eq(i);
126                url = $btnLink.attr('href');
127
128                if (url.indexOf('#') !== 0) { // 先頭が『#』でないとき
129                    // 通常のリンクとしてふるまう
130                    continue;
131                }
132
133                // 先頭が『#』のとき
134                this.$switchTarget = this.$switchTarget.add($(url)); // 切り替え対象（jQueryオブジェ）を設定
135                this.idTargetArray.push(url.replace('#', '')); // 切り替え対象（id）を格納する配列を設定
136            }
137
138            this._disp(); // 表示切り替え（すべて非表示）
139            this._setQueryObj(true); // URLクエリ文字列の取得してパラメータに分解して設定
140            this._selectBtnWithQuery(); // URLクエリ文字列で指定されたボタンを選択して表示
141        },
142
143        // 表示切り替え
144        // 引数：idを指定しない場合はすべて非表示
145        _disp: function (id) {
146            this.$switchTarget.hide(); // すべて非表示
147

148            if (id) { // 対象があるとき
149                const $target = $('#' + id);
150
151                $target.show();
152            }
153        },
154
155        // カレント表示
156        _current: function ($btn) {
157            this.$switchBtnLink.removeClass(this.option.classCurrent); // カレントクリア
158            $btn.find('a').addClass(this.option.classCurrent); // カレント表示
159        },
160
161        // URLクエリ文字列の取得してパラメータに分解して設定
162        _setQueryObj: function (decodeFlg) {
163            if (this.option.urlQueryKey === '') { // 空白の場合、URLクエリ文字列からの値を取得しない
164                return;
165            }
166
167            const query = window.location.search; // クエリ文字列
168            const queryArray = query.replace('?', '').split('&'); // クエリ文字列のパラメータごとの配列
169            let queryPair = [];
170            let i;
171            let len;
172
173            if (query.length > 0) { // クエリ文字列あり
174                for (i = 0, len = queryArray.length; i < len; i++) {
175                    queryPair = queryArray[i].split('=');
176                    if (decodeFlg) {
177                        queryPair[1] = decodeURIComponent(queryPair[1]);
178                    }
179                    this.queryObj[queryPair[0]] = queryPair[1];
180                }
181            }
182        },
183
184        // URLクエリ文字列で指定されたボタンを選択して表示
185        _selectBtnWithQuery: function () {
186            let $btn = {};
187            let value = '';
188            let key;
189
190            for (key in this.queryObj) {
191                if (this.queryObj.hasOwnProperty(key) && this.option.urlQueryKey === key) {
192                    value = this.queryObj[key];
193
194                    if ($.inArray(value, this.idTargetArray) !== -1) { // for IE8, = this.idTargetArray.indexOf(value)
195                        $btn = this.$switchBtn.find('a[href="#' + value + '"]').closest('li');
196                        this._current($btn); // カレント表示
197                        this._disp(value); // 表示切り替え
198                    }
199                    break;
200                }
201            }
202        },
203
204        _setSmoothScroll: function ($target) {
205            if ($target.length === 0) {
206                return;
207            }
208
209            $scrollElement.animate({
210                scrollTop: $target.offset().top
211            }, 500);
212        },
213
214        // イベントを設定
215        _setEvent: function () {
216            const self = this;
217
218            // 切り替えボタンをクリックしたとき（イベント）
219            self.$switchBtnLink.on('click', function (event) {
220                const $that = $(this);
221                const $thatBtn = $that.closest('li');
222                const id = $that.attr('href');
223
224                if ($thatBtn.hasClass(self.option.classCurrent) || id.indexOf('#') !== 0) { // すでにカレントしているとき、または先頭が『#』でないとき
225                    return;
226                }
227
228                // カレントなし、かつ先頭が『#』のとき
229                event.preventDefault();
230                self._current($thatBtn); // カレント表示
231                self._disp(id.replace('#', '')); // 表示切り替え
232
233                setTimeout(function () {
234                    self._setSmoothScroll($(id));
235                }, 300);
236            });
237        }
238
239    };
240
241    // 実行（ボタン（liのなかのaリンク）で表示を切り替える）
242    const switchBtn01 = new DispSwitchBtn(); // 生成
243
244    switchBtn01.run({ // 処理開始
245        $elem: $('ul#js-disp-switch-payment'), // 機能を実装する要素自体
246        urlQueryKey: 'payment' // URLクエリ文字列のkey名
247    });
248
249    const switchBtn02 = new DispSwitchBtn(); // 生成
250
251    switchBtn02.run({ // 処理開始
252        $elem: $('ul#js-disp-switch-setting'), // 機能を実装する要素自体
253        urlQueryKey: 'setting' // URLクエリ文字列のkey名
254    });
255}(this.document, this.jQuery));