Bootstrap Tabs funktionieren nicht mehr, wenn ich die JS-Version auf 3.3.7 ändere

Ich habe Bootstrap-Dokumentation auf v 3.3.7 überprüft, aber vielleicht habe ich etwas verpasst.Bootstrap Tabs funktionieren nicht mehr, wenn ich die JS-Version auf 3.3.7 ändere

Mein Problem ist, dass mein Dropdown (unten) nicht funktioniert, wenn ich CDN für Bootstrap JS v3.3.6 verwende, aber wenn ich es auf v3.3.7 ändere.

Wenn ich jedoch zu v3.3.7 ändere, funktionieren meine Registerkarten nicht mehr.

Wenn ich den Bootstrap JS Link entferne, funktionieren die Tabs wieder.

<!doctype html> 
<html> 
<head> 
    <title>Quiz App!</title> 
    <link rel="icon" type="image/png" href="http://plainicon.com/dboard/userprod/2921_4eb4c/prod_thumb/plainicon.com-64851-256px-36c.png"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 


</head> 
<body> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <h2 id="header"><span class="glyphicon glyphicon-grain"></span> <small>(in development)</small></h2> </hr> 
      <ul class="nav nav-tabs" role="tablist"> 
       <li role="presentation" class="active"><a href="/" aria-controls="home2" data-toggle="tab"><span class="glyphicon glyphicon-home"></span></a></li> 
       <li role="presentation" class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
         Featured Topics<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="/topics/us-presidents" data-toggle="tab">U.S. Presidents</a></li> 
         <li><a href="/topics/business" data-toggle="tab">Business & Investing</a></li> 
         <li><a href="/topics/astronomy" data-toggle="tab">Astronomy</a></li> 
         <li><a href="/topics/movies" data-toggle="tab">Movies</a></li> 
        </ul> 
       </li> 
       <li role="presentation"><a href="/all-quizzes" aria-controls="rankings" data-toggle="tab">All Quizzes</span></a></li> 
       <li role="presentation"><a href="/create-quiz" aria-controls="stats" data-toggle="tab">Create a Quiz</span></a></li> 
      </ul> 
     </div> 
    </div> 

     {{{body}}} 
</div> 
</body> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

</html>

Vielen Dank im Voraus für jede Hilfe.

Quelle

2016-08-30 Jake 1986

Wird die JS-Datei tatsächlich geladen? Überprüfen Sie Ihre Browser-Konsole – WillardSolutions

@EatPeanutButter danke für Ihre Antwort, wenn ich Chrome-Konsole zu überprüfen, sehe ich keine der "Fehler beim Laden der Ressource" Nachrichten. Das heißt, ich sehe es nicht unter Quellen, während ich Bootstrap CSS und Schriftarten Dateien auf der Registerkarte Quellen aufgeführt sehen. –

Die Wurzel Ihres Problems ist die href Ihrer Links innerhalb der Registerkarten. Damit die Bootstrap-js zu arbeiten, sollten Links lokale Inhalte, zum Beispiel einige div id werden Referenzierung, wie:

<a href="#all-quizzes" aria-controls="rankings" data-toggle="tab">All Quizzes</span></a>

Bootstrap js trifft sie den Kopf auf den relativen Pfad in Ihrem Link und wirft ein Fehler (Sie können es in der Konsole sehen, wenn Sie auf die Registerkarte klicken).

Wenn Sie in den Bootstrap 3.3.7-Quellcode für tabs.js schauen, sehen Sie, dass es das Datenziel-Attribut des angeklickten Elements (Tab) überprüft (Zeile 29) und wenn es leer ist, fällt es zurück auf href (Zeile 32) Dann versucht es, diesen Wert als jquery-Selektor (Zeile 51) zu verwenden, um das Element zu finden, das in Ihrem Fall fehlschlägt.

Zum Beispiel, wenn Sie auf alle Quiz Registerkarte klicken, versucht die js dies zu tun: $('/all-quizzes') und wirft einen Fehler, weil er keine gültige jQuery-Selektor ist.

Quelle

2016-08-30 19:26:34

Danke! Ich landete in einer Navigationsleiste und es funktioniert. Nochmals vielen Dank für Ihre Einsicht. –

Bootstrap Tabs funktionieren nicht mehr, wenn ich die JS-Version auf 3.3.7 ändere

Antwort

Verwandte Themen