Twitter Bootstrap-Registerkarten funktionieren nicht: Wenn ich darauf klicke, passiert nichts

81

Ich versuche, Twitter Bootstrap-Registerkarten im folgenden Code zu implementieren, aber es scheint nicht zu funktionieren. Die Registerkarten werden angezeigt, aber wenn ich darauf klicke, passiert nichts. Unten ist der einzige Code, den ich verwende. Alle anderen CSS / JS-Skripte werden aus dem Twitter Bootstrap-Framework kopiert.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="assets/twitterbootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/twitterbootstrap/css/bootstrap-responsive.css" rel="stylesheet">

</head>

<body data-spy="scroll" data-target=".subnav" data-offset="50">

<div class="container">

<!-------->
<div id="content">
    <ul class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red">Red</a></li>
        <li><a href="#orange">Orange</a></li>
        <li><a href="#yellow">Yellow</a></li>
        <li><a href="#green">Green</a></li>
        <li><a href="#blue">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $(".tabs").tabs();
    });
</script>    
</div> <!-- container -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap.js"></script>
</body>
</html>
html twitter-bootstrap DEREK N.
quelle
3
Das Hinzufügen data-togglefunktionierte auch für mich; Dies gilt auch für Bootstrap 3. Hier ist ein Bootply mit einem funktionierenden Beispiel: bootply.com/74927
ericsoco

Antworten:

87

Sie müssen Ihrem Code ein Tabs-Plugin hinzufügen

<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>

Nun, es hat nicht funktioniert. Ich habe einige Tests gemacht und es hat funktioniert, als:

  1. jQuery-Skript in <head>Abschnitt verschoben (aktualisiert auf 1.7)
  2. data-toggle="tab"Links und ID für <ul>Registerkartenelement hinzugefügt
  3. geändert $(".tabs").tabs();zu$("#tabs").tab();
  4. und einige andere Dinge, die keine Rolle spielen sollten

Hier ist ein Code

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>


<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>    
</div> <!-- container -->


<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>

</body>
</html>
BartekR
quelle
12
Danke Bartek; Ich denke jedoch, dass das Skript bootstrap.js auch bootstrap-tab.js enthält. Bitte korrigieren Sie mich, wenn ich falsch liege. Wie auch immer, ich habe bootstrap-tab.js hinzugefügt und es funktioniert immer noch nicht.
DEREK N
Sie haben Recht, aber es hängt auch von der benutzerdefinierten Erstellung des Bootstraps ab :) ... hat einen anderen Teil des Kommentars entfernt;
Ich
Versuchte das auch; funktioniert nicht. Funktioniert der obige HTML-Code für Sie?
DEREK N
4
Danke Barek, es hat funktioniert! Das Upgrade von jQuery auf 1.7 und das Umschalten von Daten löste das Problem. Sie benötigen nicht einmal das Skript-Tag.
DEREK N
Vielen Dank, das hat wirklich geholfen - ich musste das Abfrageskript nicht verschieben, ich habe nur die anderen 3 Schritte befolgt
Rob
66

Die Schlüsselelemente sind:

  1. das class="nav nav-tabs"und data-tabs="tabs"vonul
  2. das data-toggle="tab"und href="#orange"desa
  3. die class="tab-content"des divInhalts
  4. das class="tab-pane"und iddes div der Gegenstände

Der vollständige Code lautet wie folgt:

<ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="red">
        <h1>Red</h1>
        <p>red red red red red red</p>
    </div>
    <div class="tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
    </div>
    <div class="tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
    </div>
    <div class="tab-pane" id="green">
        <h1>Green</h1>
        <p>green green green green green</p>
    </div>
    <div class="tab-pane" id="blue">
        <h1>Blue</h1>
        <p>blue blue blue blue blue</p>
    </div>
</div>
Jacky
quelle
Was ist, wenn ich eine Funktion aufrufen möchte, wenn eine Registerkarte aktiv wird, um den Inhalt der Registerkarte zu laden?
sureshvv
Ausgezeichnet, dieser Rat hat mir geholfen. Danke dir!
NPC
Wenn Sie dies mit AngularJS verwenden, geben Sie ul eine ID = "myTabs" und fügen Sie Folgendes hinzu: $ ('# myTabs a'). Klicken Sie auf (Funktion (e) {e.preventDefault (); $ (this) .tab () 'Show'); });
Robbie Smith
In dieser Antwort gefällt mir die Tatsache, dass zum Initialisieren eines Tabs kein Javascript benötigt wird. Das hat mir geholfen. Vielen Dank
Aufrichtig
20

Hatte kürzlich ein Problem mit Bootstrap-Registerkarten, die den Online-Richtlinien entsprachen , aber derzeit ist ein Fehler in ihrem Markup-Beispiel data-tabs="tabs"fehlt auf <ul>Element. Ohne diese Funktion data-togglefunktioniert die Verwendung von on-Links nicht.

IdaS
quelle
16

Sie vermissen das data-toggle="tab"Daten-Tag in Ihren Menü-URLs, sodass Ihre Skripte nicht erkennen können, wo sich Ihre Tab-Schalter befinden:

HTML

<ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
Andres Ilich
quelle
4

Ich habe dieses Problem gerade behoben, indem ich dem Ankertag das Element data-toggle = "tab" hinzugefügt habe

<div class="container">

<!-------->
  <div id="content">

   <ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
<li><a data-toggle="tab"  href="#orange">Orange</a></li>
<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
<li><a data-toggle="tab" href="#green">Green</a></li>
<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="red">
    <h1>Red</h1>
    <p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
    <h1>Orange</h1>
    <p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
    <h1>Yellow</h1>
    <p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
    <h1>Green</h1>
    <p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
    <h1>Blue</h1>
    <p>blue blue blue blue blue</p>

und fügte im Kopfabschnitt http://code.jquery.com/jquery-1.7.1.js '> Folgendes hinzu

user1203530
quelle
1

Ich habe die Codes aus dem Bootstrap-Dokument wie folgt ausprobiert:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>tab demo</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="span9">
    <div class="tabbable"> <!-- Only required for left/right tabs -->
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>I'm in Section 1.</p>
        </div>
        <div class="tab-pane" id="tab2">
          <p>Howdy, I'm in Section 2.</p>
        </div>
      </div>
    </div>
</div> 
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>

und es funktioniert. Aber wenn ich die Position dieser beiden <script src...>wechsle, funktioniert es nicht. Denken Sie also daran, Ihr jquery-Skript vor bootstrap.js zu laden.

user2595775
quelle
0

Für mich war das Problem, dass ich bootstrap.min.css nicht eingeschlossen habe (ich habe nur bootstrap-responsive.min.css eingeschlossen).

Jon Onstott
quelle
0

Eigentlich gibt es einen anderen einfachen Weg, dies zu tun. Es funktioniert für mich, aber ich bin mir nicht sicher für euch. Der Schlüssel hier ist, nur das FADE in jedes (Tab-Bereich) einzufügen und es wird funktionieren. Außerdem müssen Sie nicht einmal eine Skriptfunktion oder eine andere Version von jQuery ausführen. Hier ist mein Code ... hoffe, es wird für euch alle funktionieren.

<div class="tab-pane fade" id="Customer">
    <table class="table table-hover table-bordered">
        <tr>
            <th width="40%">Contact Person</th>
            <td><?php echo $event['Event']['e_contact_person']; ?></td>
        </tr>
    </table>
</div>
<div class="tab-pane fade" id="Delivery">
    <table class="table table-hover table-bordered">
        <tr>
            <th width="40%">Time Arrive Warehouse Start</th>
            <td><?php echo $event['Event']['e_time_arrive_WH_start']; ?></td>
        </tr>
    </table>
</div>
Joe Geek
quelle
Ich hatte die fadeKlasse bereits aufgenommen , aber die Registerkarten funktionierten nur in Google Chrome mit asnc bootstrap.min.js-file. Nach dem Hinzufügen data-toggle="tab"funktionierten die Registerkarten auch unter Mozilla Firefox und MS Edge.
Grischa
0

Dies löste es, als keines der anderen Beispiele dies tat:

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});
Brock Hensley
quelle
0

Ich hatte das gleiche Problem, bis ich bootstrap-tab.js heruntergeladen und in mein Skript aufgenommen habe. Laden Sie es hier herunter: https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc /bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027

Fügen Sie die Datei bootsrap-tab.js direkt unter der Abfrage ein

<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>

Der endgültige Code sah folgendermaßen aus:

 <!DOCTYPE html>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="libraries/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>


<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>    
</div> <!-- container -->


<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

</body>
</html>

quelle
Danke, das ist das einzige, was endlich für mich funktioniert hat. Frage: Warum war diese Datei nicht im ursprünglichen Bootstrap-Download enthalten, wenn sie so gut funktioniert? Ich möchte nur sicherstellen, dass ich Zugriff auf alles habe, was ich brauche, damit Bootstrap in Zukunft funktioniert.
user2223059
0

Da ich mit arbeite, Bootstrap Javascript Modulesanstatt das gesamte Bootstrap Javascriptzu laden, funktionierten meine Registerkarten nicht, weil ich vergessen habe, load/include/die node_modules/bootstrap/js/tab.jsDatei zu laden .

Geben Sie hier die Bildbeschreibung ein

Nachdem es aufgenommen wurde, funktionierte es ...

Viel Glück

Akash
quelle
-8

Kopieren Sie einfach das Skript-Tag, um das bootstrap.jsvom Kopfabschnitt zum Ende des Körpers hinzuzufügen . Dann sollte alles gut funktionieren, auch ohne die Skripte, um die Registerkarten zu aktivieren.

Mohamed Haseel
quelle