Bootstrap .tab ('show') nicht für meinen Code arbeitet

Hier ist mein Code on JSFiddle Bootstrap .tab ('show') nicht für meinen Code arbeitet

$('button').click(function() { 
 
    $('#passive_order_categories').tab('show'); 
 
});

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script> 
 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
 

 
<button>Click</button> 
 
<div class="tabs-container"> 
 
    <ul class="nav nav-tabs"> 
 
     <li class="active"><a data-toggle="tab" href="#active_order_categories" aria-expanded="true">Active</a> 
 
     </li> 
 
     <li class=""><a data-toggle="tab" href="#passive_order_categories" aria-expanded="false">Passive</a> 
 
     </li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
     <div id="active_order_categories" class="tab-pane active"> 
 
      <div class="panel-body"></div> 
 
     </div> 
 
     <div id="passive_order_categories" class="tab-pane"> 
 
      <div class="panel-body"></div> 
 
     </div> 
 
    </div> 
 
</div>

Kann nicht herausfinden, warum Bootstrap .tab('show') nicht für meinen Code zu arbeiten.

Quelle

2015-08-16 Debiprasad

Sie sollten den Code hier anstelle des Links posten. Und da es einfach genug ist, habe ich es hierher kopiert und mache einen Ausschnitt für diese Zeit. – fuyushimoya

Vielen Dank für die Bearbeitung. Ich werde die Codes in Zukunft selbst hinzufügen. Schön zu sehen, dass Stackoverflow eine Funktion zur Ausführung der Snippets integriert hat. – Debiprasad

Ja, ich war überrascht von seiner Leistung, wenn ich ein Anfänger auf SO bin, und fange an, es sehr oft zu benutzen, beachte nur, dass es einige Grenzen hat, zB: du kannst es nicht benutzen um 'localStorage/sessionStorage' zu demonstrieren , oder ein falsches Echo für den Ajax-Test, es ist immer noch gut, eine alternative Wahl zu treffen. – fuyushimoya

Von Bootstrap#tabs, was das Ziel zu lösen ist die tab, die wir geklickt haben, um den Inhalt anzuzeigen, nicht den Inhalt selbst.

Sie sollen die zweiten Registerkarte geben, die auf die passive_order_categories eine ID verknüpft, oder ul.nav-tabs li:eq(1) verwenden, um die zweiten li in der Liste zu bekommen.

Oder verwenden Sie a[href="#passive_order_categories"], um den Anker zu dieser Inhaltsseite zu erhalten.

gelten dann die .tab('show') darauf, nicht auf $('#passive_order_categories')

$('button').click(function() { 
 
    // Find the target tab li (or anchor) that links to the content you want to show. 
 
    $('a[href="#passive_order_categories"]').tab('show'); 
 
    //$('ul.nav-tabs li:eq(1)').tab('show'); 
 
});

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script> 
 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 

 
<button>Click</button> 
 
<div class="tabs-container"> 
 
    <ul class="nav nav-tabs"> 
 
     <li class="active"><a data-toggle="tab" href="#active_order_categories" aria-expanded="true">Active</a> 
 
     </li> 
 
     <li class=""><a data-toggle="tab" href="#passive_order_categories" aria-expanded="false">Passive</a> 
 
     </li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
     <div id="active_order_categories" class="tab-pane active"> 
 
      <div class="panel-body"></div> 
 
     </div> 
 
     <div id="passive_order_categories" class="tab-pane"> 
 
      <div class="panel-body"></div> 
 
     </div> 
 
    </div> 
 
</div>

Quelle

2015-08-16 15:18:03 fuyushimoya

Vielen Dank für Ihre Antwort. Ich habe mich verwirrt und Tab-Inhalt als Tab betrachtet. – Debiprasad

Gott sei Dank hast du mir viel Zeit gespart! –

Beachten Sie, dass Bootstrap mit nav-pills statt tabs Sie noch .tab('show') verwenden, um die Wirkung zu erzielen.

Quelle

2017-07-19 12:38:25

Bootstrap .tab ('show') nicht für meinen Code arbeitet

Antwort

Verwandte Themen