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

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

新規登録して質問してみよう
ただいま回答率
85.51%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

0回答

1030閲覧

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

hashiyumi

総合スコア8

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2018/12/07 08:24

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

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

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

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

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

該当のソースコード

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

*/

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cerfweb

2019/02/01 10:42

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問