質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

WordPressテーマに組み込んであるBootstrap4で作った最初のタブの中身が、他のタブをクリックするまで表示されない

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 749

score 8

前提・実現したいこと

WordPressテーマに組み込んであるBootstrap4で作った最初のタブの中身が、他のタブをクリックするまで表示されないので、読み込んだ直後から表示されるようにしたいです。

発生している問題・エラーメッセージ

こちらのページ中程にあるタブです。
Webサイトリンク

「料金」のタブに最初は何も表示されず、「料金」以外のタブをクリックすると、全てのタブに情報が表示されるようになります。
最初読み込まれた段階でtab-paneというdivにfadeというクラスが不可されて見えない状態になってしまっているようです。現在子テーマを使用中で、親テーマに組み込まれたjsを流用しています。

エラーメッセージはとくにありません

該当のソースコード

javascript,jQuery
ソースコード(bootstrap4)
/**

  • --------------------------------------------------------------------------
  • Bootstrap (v4.0.0-alpha.2): tab.js
  • Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  • --------------------------------------------------------------------------
    */

var Tab = (function ($) {

/**

  • ------------------------------------------------------------------------
  • Constants
  • ------------------------------------------------------------------------
    */

var NAME = 'tab';
var VERSION = '4.0.0-alpha';
var DATA_KEY = 'bs.tab';
var EVENT_KEY = '.' + DATA_KEY;
var DATA_API_KEY = '.data-api';
var JQUERY_NO_CONFLICT = $.fn[NAME];
var TRANSITION_DURATION = 150;

var Event = {
HIDE: 'hide' + EVENT_KEY,
HIDDEN: 'hidden' + EVENT_KEY,
SHOW: 'show' + EVENT_KEY,
SHOWN: 'shown' + EVENT_KEY,
CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY
};

var ClassName = {
DROPDOWN_MENU: 'dropdown-menu',
ACTIVE: 'active',
FADE: 'fade',
IN: 'in'
};

var Selector = {
A: 'a',
LI: 'li',
DROPDOWN: '.dropdown',
UL: 'ul:not(.dropdown-menu)',
FADE_CHILD: '> .nav-item .fade, > .fade',
ACTIVE: '.active',
ACTIVE_CHILD: '> .nav-item > .active, > .active',
DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"]',
DROPDOWN_TOGGLE: '.dropdown-toggle',
DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
};

/**

  • ------------------------------------------------------------------------
  • Class Definition
  • ------------------------------------------------------------------------
    */

var Tab = (function () {
function Tab(element) {
_classCallCheck(this, Tab);

this._element = element;
}

/**

  • ------------------------------------------------------------------------
  • Data Api implementation
  • ------------------------------------------------------------------------
    */

// getters

_createClass(Tab, [{
key: 'show',

// public

value: function show() {
var _this15 = this;

if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && $(this._element).hasClass(ClassName.ACTIVE)) {
return;
}

var target = undefined;
var previous = undefined;
var ulElement = $(this._element).closest(Selector.UL)[0];
var selector = Util.getSelectorFromElement(this._element);

if (ulElement) {
previous = $.makeArray($(ulElement).find(Selector.ACTIVE));
previous = previous[previous.length - 1];
}

var hideEvent = $.Event(Event.HIDE, {
relatedTarget: this._element
});

var showEvent = $.Event(Event.SHOW, {
relatedTarget: previous
});

if (previous) {
$(previous).trigger(hideEvent);
}

$(this._element).trigger(showEvent);

if (showEvent.isDefaultPrevented() || hideEvent.isDefaultPrevented()) {
return;
}

if (selector) {
target = $(selector)[0];
}

this._activate(this._element, ulElement);

var complete = function complete() {
var hiddenEvent = $.Event(Event.HIDDEN, {
relatedTarget: _this15._element
});

var shownEvent = $.Event(Event.SHOWN, {
relatedTarget: previous
});

$(previous).trigger(hiddenEvent);
$(_this15._element).trigger(shownEvent);
};

if (target) {
this._activate(target, target.parentNode, complete);
} else {
complete();
}
}
}, {
key: 'dispose',
value: function dispose() {
$.removeClass(this._element, DATA_KEY);
this._element = null;
}

// private

}, {
key: '_activate',
value: function _activate(element, container, callback) {
var active = $(container).find(Selector.ACTIVE_CHILD)[0];
var isTransitioning = callback && Util.supportsTransitionEnd() && (active && $(active).hasClass(ClassName.FADE) || Boolean($(container).find(Selector.FADE_CHILD)[0]));

var complete = $.proxy(this._transitionComplete, this, element, active, isTransitioning, callback);

if (active && isTransitioning) {
$(active).one(Util.TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
} else {
complete();
}

if (active) {
$(active).removeClass(ClassName.IN);
}
}
}, {
key: '_transitionComplete',
value: function _transitionComplete(element, active, isTransitioning, callback) {
if (active) {
$(active).removeClass(ClassName.ACTIVE);

var dropdownChild = $(active).find(Selector.DROPDOWN_ACTIVE_CHILD)[0];

if (dropdownChild) {
$(dropdownChild).removeClass(ClassName.ACTIVE);
}

active.setAttribute('aria-expanded', false);
}

$(element).addClass(ClassName.ACTIVE);
element.setAttribute('aria-expanded', true);

if (isTransitioning) {
Util.reflow(element);
$(element).addClass(ClassName.IN);
} else {
$(element).removeClass(ClassName.FADE);
}

if (element.parentNode && $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) {

var dropdownElement = $(element).closest(Selector.DROPDOWN)[0];
if (dropdownElement) {
$(dropdownElement).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE);
}

element.setAttribute('aria-expanded', true);
}

if (callback) {
callback();
}
}

// static

}], [{
key: '_jQueryInterface',
value: function _jQueryInterface(config) {
return this.each(function () {
var $this = $(this);
var data = $this.data(DATA_KEY);

if (!data) {
data = data = new Tab(this);
$this.data(DATA_KEY, data);
}

if (typeof config === 'string') {
if (data[config] === undefined) {
throw new Error('No method named "' + config + '"');
}
data[config]();
}
});
}
}, {
key: 'VERSION',
get: function get() {
return VERSION;
}
}]);

return Tab;
})();

$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
event.preventDefault();
Tab._jQueryInterface.call($(this), 'show');
});

/**

  • ------------------------------------------------------------------------
  • jQuery
  • ------------------------------------------------------------------------
    */

$.fn[NAME] = Tab._jQueryInterface;
$.fn[NAME].Constructor = Tab;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return Tab._jQueryInterface;
};

return Tab;
})(jQuery);

※HTMLのソースは長くなるので割愛します

試したこと

何かバッティングしてるのかと思い、pagetopボタンのjQueryを削除してみましたが変わりませんでした。

補足情報(FW/ツールのバージョンなど)

WordPress4.9.8
親テーマ:siimple バージョン: 1.2
子テーマ:siimple-child

他何か必要な情報がありましたらお尋ねください。
どうぞよろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • cerfweb

    2019/02/01 19:42

    Bootstrapのバージョンが4.0.0-alpha.2と記載されていますが、最新のバージョン(4.2.x)にアップデートは可能ですか。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • JavaScriptに関する質問
  • WordPressテーマに組み込んであるBootstrap4で作った最初のタブの中身が、他のタブをクリックするまで表示されない