タグ別アーカイブ: bootstrap4

bootstrap4のタブで別ページから直接特定のタブにリンクする方法

本当に苦労しました。

結論から言うと、jqueryのバージョンアップ時に気を付けないといけないよね!ってことなのですが笑

では、参考にさせていただいたサイトはこちら

ハッシュ付きURLリンクでの訪問時にBootstrapの適切なタブを開く&スクロールする|ENTEREAL様

入力するコードはこちら
適当なjsファイルを名前を付けて保存してfooterで呼び出します。

$(document).ready(function() {
    // #(ハッシュ)指定されたタブを表示する
    var hashTabName = document.location.hash;
    if (hashTabName) {
        $('.nav-tabs a[href=' + hashTabName + ']').tab('show');
    }
});

おおむねこちらで動作します。JQueryのバージョンが低ければ・・・・

ただ、bootstrap4を使うとたぶんjquery3.○.○を使うと思うんですよね。そうすると、なぜか、タブが切り替わらい?!

そこからいろいろとトライ&エラーの繰り返しで、
jQueryのバージョンが原因だと突き止めたあと、
(サイトのデザインが完成している)いまさらバージョンを変えるわけにもいかずJQueryのサイトを見ていると、、

あるじゃん、「jQuery Migrate Plugin」なんて便利なものが!

google先生の翻訳で日本語になったサイトを読むと
そのプラグインを使うと失われた機能を取り戻すとかなんとか

とにかく、Download the compressed, production jQuery Migrate 1.4.1をダウンロード!

jQuery本体の下に呼び出してサイトにアップすると

動いた!!

とりあえず、わすれないうちに記録をしておきます。