Bootstrap Tabs - Keine Anzeige von Inhalten beim Klicken auf die Registerkarte

Ich arbeite lokal in VS-Code und versuchen, Bootstrap-Registerkarten zu arbeiten. Ich benutze Bootstrap 4. Ich habe mehrere Beispiele und verschiedene Möglichkeiten versucht, dies ohne Erfolg zu tun. Ich bin ziemlich neu in der Entwicklung, also tue ich nicht so, als wüsste ich alles ":) Hoffentlich schaue ich meinen Code an, wer das tut, wird" here you go! Your forgetting ....... gehen ... HierBootstrap Tabs - Keine Anzeige von Inhalten beim Klicken auf die Registerkarte

ist der Code in meine HTML-Datei

<!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>

Vielen Dank für jede Hilfe

Quelle

2017-11-04 user3408397

ich glaube, Sie vergessen, Bootstrap js Dateien enthalten

Aus der Dokumentation:.

<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>

Quelle

2017-11-04 23:22:45

Vielen Dank! Hinzufügen eines Verweises auf den Bootstrap JS gibt das erwartete Verhalten zurück! – user3408397

Danke für die Hilfe! Ich habe einen Verweis auf den Bootstrap JS hinzugefügt und die Tabs scheinen jetzt zu funktionieren! Vielen Dank Ivan!

Unten ist der Code, der darin arbeitet!

<!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>

Quelle

2017-11-04 23:44:51 user3408397

Bootstrap Tabs - Keine Anzeige von Inhalten beim Klicken auf die Registerkarte

Antwort

Verwandte Themen