ブートストラップタブ - タブをクリックするとコンテンツが表示されない

私はVSコードでローカルで作業していて、ブートストラップタブを動作させようとしています。私はブートストラップ4を使用しています。私はいくつかの例と、これを無駄にするさまざまな方法を試しました。私は開発にかなり新しいので、私は "それをすべて知っている"ふりをしていない:) うまくいけば、これはたくさん行くだろう私のコード誰かを見て "ここに行く！あなたの忘れている.......ここでブートストラップタブ - タブをクリックするとコンテンツが表示されない

は、任意のヘルプ

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Bootstrap Tabs</title> 
     <link rel="stylesheet" href="./css/bootstrap.min.css"> 
     <link rel="stylesheet" href="./twitch.css"> 
     <script src="./js/jquery-3.2.1.min.js"></script> 
     <script src="./twitch.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <ul class="nav nav-tabs"> 
       <li> 
        <a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a> 
       </li> 
       <li> 
        <a class="nav-link" href="#featured" role="tab" data-toggle="tab">Featured</a> 
       </li> 
      </ul> 
      <div class="tab-content"> 
       <div role="tabpanel" class="tab-pane active" id="home">Home Info</div> 
       <div role="tabpanel" class="tab-pane" id="featured">Featured Info</div> 
      </div> 
     </div> 
    </body> 
</html>

おかげで私の.htmlファイル内のコードである

出典

2017-11-04 user3408397

私はあなたがブートストラップのjsファイルを含めるのを忘れていると思うのドキュメントから

：！。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

出典

2017-11-04 23:22:45

ありがとうございます！ブートストラップJSへの参照を追加すると、予想される動作が返されます。 – user3408397

ありがとうございました！私はブートストラップJSへのリファレンスを追加し、タブは今働いているようです！非常にイワンありがとう！

以下は、作業中のコードです！

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Twitchi Feed</title> 
     <link rel="stylesheet" href="./css/bootstrap.min.css"> 
     <link rel="stylesheet" href="./twitch.css"> 
     <script src="./js/jquery-3.2.1.min.js"></script> 
     <script src="./js/bootstrap.min.js"></script> 
     <script src="./twitch.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <ul class="nav nav-tabs"> 
       <li> 
        <a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a> 
       </li> 
       <li> 
        <a class="nav-link" href="#featured" role="tab" data-toggle="tab">Featured</a> 
       </li> 
      </ul> 
      <div class="tab-content"> 
       <div role="tabpanel" class="tab-pane active" id="home">Home Info</div> 
       <div role="tabpanel" class="tab-pane" id="featured">Featured Info</div> 
      </div> 
     </div> 
    </body> 
</html>

出典

2017-11-04 23:44:51 user3408397

ブートストラップタブ - タブをクリックするとコンテンツが表示されない

答えて

関連する問題