Bootstrapのタブが設定できない(data-toggle="tab")

Question

当方ドットインストールにてBootstrap4入門の学習を行っているのですが、
タブの機能の導入で躓きました。

<section class="py-5">
  <h2 class="mb-5 text-center">How to use </h2>
  <div class="container">
    <ul class="nav nav-tabs">
      <li class="nav-item"><a href="#ios" class="nav-link" data-toggle="tab">IOS</a></li>
      <li class="nav-item"><a href="#android" class="nav-link active" data-toggle="tab">Android</a></li>
    </ul>
    <div class="tab-content py-4">
      <div id="ios" class="tab-pane">
        <p>hello iosiosios</p>
      </div>
      <div id="android" class="tab-pane active">
        <p>hello androidandoroidandroid</p>
      </div>
    </div>
  </div>
</section>

5行目、6行目のようにa要素に対して「data-toggle="tab"」とすることで、タブをクリックするとタブの切り替えができるようになるとのことでしたが、実際に試してみると、IOSのタブをクリックしてもactiveであるandroidのタブが表示されたままです。どうしてでしょうか。

activeタブを入れ替えたり、idの名前を変更してみたりはしましたが解決しませんでした。

環境は
Bootstrap 4.3.1
atomエディタ
です。

Answer 1

jQuery を読み込んでいますか？ jQuery と Bootstrap 4.3.1 を読み込んだ状態であれば、質問文のコードのタブ機能は、正常に動作しているように見えます(動作確認用リンク)。

Comments

[tyobi]

回答ありがとうございます。
jQueryを読み込んでいませんでした。
「 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"」を追加することで、タブが正常に機能しました。ありがとうございました。

Answer 2

.tab-paneには.fadeも必要です。

<div id="ios" class="tab-pane fade">...</div>
<div id="android" class="tab-pane fade active">...</div>

追記
コメントに指摘されている通りでした。すみません。

Comments

[tyobi]

回答ありがとうございます。
fadeを追加しましたがサイトを更新した瞬間に文字が消えるようになって、
なおかつタブは変更されないままでした。

[s8_chu]

cerfweb さん>
`fade`クラスはタブパネルにフェード効果を適用するだけなので、必要では無いと思います。

[cerfweb]

確かに、その通りですね。すみません・・・