Bootstrap4 タブ切り替えが効かない

前提・実現したいこと

Boostrapでタブの切り替えを行いたい。

発生している問題

タブの表示はできたがうまく切り替えができない。
(デフォルトの最初のタブのままで、他のタブに切り替えができない)

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
7  <!-- CSS only -->
8  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
9  <!-- JavaScript Bundle with Popper -->
10  <title>sample</title>
11</head>
12<body>
13  <ul class="nav nav-tabs">
14    <li class="nav-item"><a class="nav-link active" href="#tab1" data-toggle="tab">タブ1</a></li>
15    <li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">タブ2</a></li>
16    <li class="nav-item"><a class="nav-link" href="#tab3" data-toggle="tab">タブ3</a></li>
17    <li class="nav-item"><a class="nav-link" href="#tab4" data-toggle="tab">タブ4</a></li>
18  </ul>
19
20  <div class="tab-content">
21    <div id="tab1" class="tab-pane active">タブ１の内容</div>
22    <div id="tab2" class="tab-pane">タブ２の内容</div>
23    <div id="tab3" class="tab-pane">タブ３の内容</div>
24    <div id="tab4" class="tab-pane">タブ４の内容</div>
25  </div>
26
27</html>

試したこと

Bootstrap タブ切り替わらない　でググってみましたが、原因を特定できる記事がありませんでした。

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

Chromeで表示しています。

m.ts10806

2021/02/06 03:46

ドキュメントは確認されたのでしょうか。

m.ts10806

2021/02/06 03:47

あと、Bootstrap4とタイトルに書かれてますが読ませているCDNは5です。

yuki84web

2021/02/06 04:26

JSを読み込んでいないように見えます

退会済みユーザー

2021/02/06 04:32

cssとjsをペアで組み込まないと動かないよねぇ。

m.ts10806

2021/02/06 04:45

本体JSが必要な機能かどうかにもよります。

tomomo

2021/02/06 06:22

タイトルはBootstrap4なのだけど読み込んでいるのがbootstrap@5.0.0-beta1って部分も気になる所です。どちらでしょう？ 4はjsが必要だったような気がするが5は...。

行動規範の内容に同意します

回答1件

既に指摘した通り、Bootstrap4なのか5なのかは確実にする必要があります。

5の場合下記

Navs and tabs#tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.

4の場合下記

Navs#tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.

いずれもJavaScriptが必要であることが分かります。

jQuery依存の4とjQuery不要の5では組み方が変わってきますので、
どちらを使うのかを決めたうえで、適切に本体ファイルを読み込み、
対応してください。

投稿2021/02/07 00:59

m.ts10806

総合スコア80875