タブメニューの切替えができない

タブメニューの切替えをできるようにしたい

ドットインストール４入門　＃１７タブメニューを完成させようを勉強しています。
動画ではdata-toggle="tab"を追加するとタブが切り替えられるようになっていますが
実際はタブの切替えができませんでした。
すいません。何でも良いのでわかる事あればご教授願います。

該当のソースコード

    <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 active" data-toggle="tab">iOS</a></li>
          <li class="nav-item"><a href="#android" class="nav-link" data-toggle="tab">Android</a></li>
        </ul>
        <div class="tab-content py-4">
          <div id="ios" class="tab-pane active">
            <p>Hello iOS. Hello iOS. Hello iOS. Hello iOS. Hello iOS. Hello iOS. Hello iOS. Hello iOS. Hello iOS.</p>
          </div>
          <div id="android" class="tab-pane">
            <p>Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android.</p>
          </div>
        </div> 
      </div>
    </section>

全コード

<!doctype html> <html lang="ja"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<title>Dotinstall App</title>
<style>
  .cover {
    background: url(img/bg.png);
    background-size: cover;
  }
</style>

</head> <body> <header> <div class="cover text-white text-center py-5"> <h1 class="display-4 mb-4">Dotinstall App</h1> <a href="" class="btn btn-primary btn-lg">Get It Now!</a> </div> </header>

<main>
  <section class="py-5">
    <h2 class="text-center mb-5">Features</h2>
    <div class="container">
      <div class="mb-5 row">
        <div class="col-sm-8">
          <h3>Awesome</h3>
          <p>Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. </p>
        </div>
        <div class="col-sm-4">
          <img src="img/phone.png" class="w-100 rounded-circle">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-8 order-sm-2">
          <h3>Awesome</h3>
          <p>Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. </p>
        </div>
        <div class="col-sm-4 order-sm-1">
          <img src="img/movie.png" class="w-100 rounded-circle">
       </div>
     </div>
    </section>

    <section class="bg-light text-center py-5">
      <h2 class="mb-5">Plans</h2>
        <div class="container">
          <table class="table table-hover">
            <thead>
              <tr><th>PlanA</th><th>PlanB</th></tr>
            </thead>
            <tbody>
              <tr><td>AA</td><td>BB</td></tr>
              <tr><td>AAA</td><td>BBB</td></tr>
              <tr><td>AAAA</td><td>BBBB</td></tr>
            </tbody>
          </table>
        </div>
    </section>

    <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 active" data-toggle="tab">iOS</a></li>
          <li class="nav-item"><a href="#android" class="nav-link" data-toggle="tab">Android</a></li>
        </ul>
        <div class="tab-content py-4">
          <div id="ios" class="tab-pane active">
            <p>Hello iOS. Hello iOS. Hello iOS. Hello iOS. Hello iOS. Hello iOS. Hello iOS. Hello iOS. Hello iOS.</p>
          </div>
          <div id="android" class="tab-pane">
            <p>Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android. Hello Android.</p>
          </div>
        </div> 
      </div>
    </section>

</main>
<footer>

</footer>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOB2vfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

</body> </html>

試したこと

該当のソースコードと、動画中のコードに差分がないことを確認した。

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

bootstrap v4.5

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

回答1件

ベストアンサー

記載していただいたHTMLをローカルに配置した状態で、そのHTMLファイルをブラウザで開くとintegrityのハッシュ検証が無効になりますので、integrity属性を外して動かしたところ、タブの切り替えがきちんと行われるのを確認しました。

投稿2020/09/05 01:20

A-pZ

総合スコア12011

satoshi4365

2020/09/05 03:06

ご回答ありがとうございます。回答の通り、下記integrity属性を外したところタブの切替えがうまく行われました。 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOB2vfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

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