パネルが切り替わらない

前提・実現したいこと

BootStrap4を練習していてナビゲーションを作っているのですが、URLの#～部分は切り替わっていますが、タブの中身が切り替わりません。テンプレの通りにしているのにならないのでどうしたらいいのかわからないので解決方法を教えていただけないでしょうか？

使っているアプリは、Visual Basic2017になります

発生している問題・エラーメッセージ

エラーメッセージ
アクティベーション要求がエラー’操作はサポートされていません。不明なエラー：0x80040904で失敗しました。

### 該当のソースコード
<!--index.html-->

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>ナビゲーション</title>
    <meta name="description" content="ナビゲーションです">

    <!--スマホなどでのサイズ調整-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--電話番号にならないようにする-->
    <meta name="format-detection" content="telephone=no">

    <!--BOOTSTRAP4の導入-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css" />


    <!--JavaScript-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo">
    <script src="js/main.js" defer></script>
</head>

<body>
    <ul class="nav nav-tabs" id="myTab">
        <li class="nav-item">
            <a class="nav-link active" id="home-tab" href="#home" data-toggle="tab" role="tab" aria-controls="home" aria-selected="true">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">a</div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">b</div>
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">c</div>
    </div>
</body>
</html>

```JavaScript BootStrap4
ソースコード

試したこと

ナビゲーションの切り替えパネル

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

ここにより詳細な情報を記載してください。

moromon

2020/12/23 04:28

> テンプレどこのテンプレですか？ページを追記していただけるとうれしいです。 > タブの中身が切り替わりません。タブの中身が切り替わらないとはどういうことでしょう。もう少し詳しく実現したい動作を書いていただけるとわかりやすいです。

tani010

2020/12/23 04:44

>テンプレ https://getbootstrap.com/docs/4.0/components/navs/#tabs のJavaScript behaviorになります。＞タブの切り替えについて Profileを押したとき、tab-contentのprofileの部分のbが表示され、contactを押せば同じようにcが表示されるようにしています。しかし、現時点ではURLの部分ではhref=#～の部分が切り替わっていますが中身のa,b,cが表示されていない状態になっています。

moromon

2020/12/23 04:46

回答で追記しましたが、ご使用しているBootstrapバージョンに合うJSファイルをhtmlに読み込ませてみてくださいね。

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

回答1件

ベストアンサー

追記にて記載した者ですが、探してみたところ、もしかして以下のテンプレでしょうか？

https://getbootstrap.jp/docs/4.5/components/navs/#tab

貼り付けていただいたソースコードを拝見したところBootstrapのJavascriptファイルを読み込んでいないだけのような気がします。
公式サイトよりJSファイルをダウンロードして、PJに入れて、読み込ませたら動くかもしれません。

もしくは

html
1<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>