2014-09-25 14 views
8

Utilizzo di bootstrap 3 Sto provando questo esempio, usando class = "active" nell'elemento li. Sfortunatamente, quando la pagina viene visualizzata inizialmente, non viene visualizzato né il pannello, l'intero contenuto della scheda è vuoto. Le schede di tabulazione vengono visualizzate correttamente e quando faccio esplicitamente clic su una scheda, viene visualizzato il riquadro corretto.Come rendere attivo il tab bootstrap 3 nav di default?

Cosa mi manca?

Grazie in anticipo.

<ul class="nav nav-tabs"> 
    <li class="active"><a href="#graduation" data-toggle="tab">graduation</a></li> 
    <li><a href="#graduate" data-toggle="tab">graduate</a></li> 
    <li><a href="#extension" data-toggle="tab">extension</a></li> 
</ul> 
<div class="tab-content" id="TabContent"> 
    <div class="tab-pane fade" id="graduation"> 
     <p> 
      anything 
     </p> 
    </div> 
    <div class="tab-pane fade" id="graduate"> 
     <p> 
      graduate 
     </p> 
    </div> 
    <div class="tab-pane fade" id="extension"> 
     <p> 
      extension 
     </p> 
    </div> 
</div> 

risposta

21

È inoltre necessario specificare la classe active sul default tab-pane (e per le schede dissolvenza è necessario aggiungere la classe in), quindi è necessario cambiare

<div class="tab-pane fade" id="graduation"> 

a

<div class="tab-pane fade in active" id="graduation"> 
+0

Grazie che è stato. È interessante sapere quanti esempi di lavoro non sono disponibili a riguardo. –

+3

Uso sempre la [documentazione ufficiale] (http://getbootstrap.com/javascript/#tabs), a meno che non sia qualcosa che non riesco a trovare lì. –

2

Per chi cerca una risposta per bootstrap 4

boostrap 4

<div class="tab-pane fade show active" id="graduation"> 
<div class="tab-pane fade" id="graduation"> 

Rispetto al bootstarp 3

<div class="tab-pane fade in active" id="graduation"> 
<div class="tab-pane fade in" id="graduation"> 
Problemi correlati