https://www.click-sec.com/app-files/js/module/tabs.js

1/**
2 * @method tabs
3 * - タブ切り替え
4 */
5
6// import
7// import equalHeight from './equalHeight';
8// import Util from '../util';
9
10var u = new Util();
11
12/**
13 * @definition
14 */
15var tabs = function(config) {
16  // options
17  var c = $.extend({
18    factorElement: '.js-tabs',
19    naviElement: '.js-tabs__navi',
20    triggerElement: '.js-tabs__trigger',
21    panelElement: '.js-tabs__panel',
22    firstDisplayTab: '', // 初期表示タブ：タブのid「#xxxx」を指定（※何も指定しなければ一番最初のタブを表示）
23  }, config);
24  // vars
25  var $elm = $(c.factorElement);
26  var tabWrap = c.factorElement;
27  var tabNavi = c.naviElement;
28  var tabTrigger = c.triggerElement;
29  var tabPanel = c.panelElement;
30  var currentName = u.state.current;
31  var hashString = u.hash;
32  // exit
33  if ($elm.length === 0) { return false; }
34  // setting：表示設定
35  $elm.each(function () {
36    var wrap = $(this);
37    var navi = wrap.find(tabNavi);
38    var panel = wrap.find(tabPanel);
39    var firstPanel = c.firstDisplayTab;
40    
41    if (firstPanel !== '') {
42      // JS側で初期表示タブに指定がある場合
43    } else if (navi.find('li').hasClass(currentName)) {
44      // HTML側で現在地の指定がある場合
45      firstPanel = $('.' + currentName, navi).find(tabTrigger).attr('href');
46    } else {
47      firstPanel = navi.find('li:first').find(tabTrigger).attr('href');
48    }
49    // アンカーの飛び先がタブパネルの場合、firstPanelを設定
50    if (hashString !== '' && $(hashString).offset() !== undefined && $(hashString).hasClass(tabPanel.replace('.',''))) {
51      firstPanel = hashString;
52    }
53    
54    navi.find('a[href="' + firstPanel + '"]').parent().addClass(currentName);
55    panel.show().not(firstPanel).hide();
56  });
57  // control
58  $(tabTrigger).on('click', function () {
59    var trigger = $(this);
60    var wrap = trigger.closest(tabWrap);
61    var navi = wrap.find(tabNavi);
62    var panel = wrap.find(tabPanel);
63    var targetPanel = trigger.attr('href');
64    if (trigger.parent().hasClass(currentName)) {
65      return false;
66    }
67    navi.find('li').removeClass(currentName);
68    navi.find('a[href="' + targetPanel + '"]').parent().addClass(currentName);
69    panel.show().not(targetPanel).hide();
70    // 再実行
71    if (wrap.find(targetPanel).find(u.factor.equalHeight).length) { equalHeight(); }
72    return false;
73  });
74}
75
76
77/**
78 * @execution
79 */
80$(function(){ 
81  tabs();
82});