Bootstrapでタブ切り替えが出来ない場合の原因と対処法！
Bootstrapではタグに特定のクラスを指定してあげるだけで簡単にタブ切り替えが実装できるようになります。しかし、タブ切り替えが上手く動作しないことがあります。この記事ではBootstrapでタブ切り替えが出来ない場合の原因と対象法を紹介しています。
Bootstrapでタブ切り替えが出来ない場合の原因と対処法
Bootstrapを使うことで簡単に切り替えができるタブを実装することができます。
実装方法については下記の記事で詳しく紹介していますので、ぜひ参考にしてみてください。
記事の通りに進めれば、切り替えができるタブが実装できると思います。
ですが、記事の通り進めてもタブを切り替えることが出来ないとなった時に、原因ごとにパターン分けして解決法を解説していきます。
jQueryを読み込んでいない
jQueryのCDNからの読み込み
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>BootstrapのJavaScriptはjQueryの記法を使って記述されています。そのため、jQueryを先に読み込まないとBootstrapのJavaScriptだけを読み込んでいても上手く動作しません。
切り替えできるタブを実装するにはjQueryとBootstrapのJavaScriptの２つを最低限きちんと読み込んでいることを確認しましょう。
※popper.jsはツールチップなどを実装する際に必要になります。タブを実装するだけなら読み込まなくても問題ありませんが、こちらの記事では読み込んでおきます。
タブ要素にdata-toggle="tab"を記述していない
<li class="nav-item">
<a href="#" class="nav-link" data-toggle="tab">タブ</a><!-- .nav-link -->
</li><!-- .nav-item -->BootstrapのJavaScriptの中でdata-toggle="tab"の記述を読み取ってタブの切り替えをしています。この記述が抜けていることでタブを切り替えることが出来ないです。
公式ドキュメントを見てもdata-toggle="tab"については少しわかりずらく、この記述が抜けることが多いので注意してください。
まとめ
今回、Bootstrapでタブ切り替えできない場合の原因と対象法を２つ具体的に紹介しました。
ですが、あなたの環境でタブが切り替えできない原因が上記の２つの中のどちらかに必ず該当するわけではありません。
別のJavaScriptライブラリなどと競合しているなど原因はさまざまです。ディベロッパーツールなどをよく見て原因を特定していくことが大切です。
