Bootstrap .tab ('show') non funziona per il mio codice

Ecco il mio Code on JSFiddle Bootstrap .tab ('show') non funziona per il mio codice

$('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>

non riesce a capire il motivo per cui è Bootstrap .tab('show') non funziona per il mio codice.

fonte

2015-08-16 Debiprasad

Si consiglia di inviare il codice qui, al posto del link. E come è abbastanza semplice, l'ho copiato qui e ne faccio uno snippet, per ora. – fuyushimoya

Grazie per la modifica. Aggiungerò i codici io stesso in futuro. È bello vedere che StackOverflow ha una funzione integrata per eseguire gli snippet. – Debiprasad

Sì, sono rimasto sorpreso la sua potenza quando sono un principiante su SO, e iniziare ad usarlo molto spesso, basta notare che ha alcuni limiti, ad esempio: non è possibile utilizzarlo per demo 'localStorage/sessionStorage' correlate , o qualche eco falso per test di ajax, è comunque bene tenere jsfiddle una scelta alternativa. – fuyushimoya

Da Bootstrap#tabs, l'obiettivo da attivare è lo tab che abbiamo fatto clic per mostrare il contenuto, non il contenuto stesso.

si dovrebbe dare la seconda scheda che si collega alla passive_order_categories un id, o utilizzare ul.nav-tabs li:eq(1) per ottenere la seconda li nella lista.

Oppure utilizzare a[href="#passive_order_categories"] per ottenere l'ancora legata a quella pagina di contenuto.

applicano Poi il .tab('show') su di esso, non su $('#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>

fonte

2015-08-16 15:18:03 fuyushimoya

Grazie per la risposta. Mi sono confuso e ho considerato il contenuto della scheda come tab. Dio – Debiprasad

Thank voi mi ha salvato un sacco di tempo! –

noti che usare Bootstrap nav-pills invece di tabs, si vuole ancora utilizzare .tab('show') per ottenere l'effetto.

fonte

2017-07-19 12:38:25

Bootstrap .tab ('show') non funziona per il mio codice

risposta

Problemi correlati