jQuery UI ha la possibilità di inizializzare le schede con le schede impostati fade in/out, in questo modo:Come posso dissolvere i tab in e out con il framework Bootstrap di Twitter?
$(".selector").tabs({ fx: { opacity: 'toggle' } });
è qualcosa di simile possibile con le linguette quadro Twitter Bootstrap?
No, ma si potrebbe aggiungere la tua, jsFiddle
$('.tabs').tabs()
.bind('change', function (e) {
$(this).next().hide().fadeIn();
});
Sia per Bootstrap 2 e 3, si può semplicemente dare il vostro .tab-pane elementi di una classe fade con bootstrap-transition.js caricato. Non è necessario scrivere una sola riga del tuo codice JavaScript.
<div class="tab-content">
<div class="tab-pane fade in active" id="home">...</div>
<div class="tab-pane fade" id="profile">...</div>
<div class="tab-pane fade" id="messages">...</div>
<div class="tab-pane fade" id="settings">...</div>
</div>
Esempio di codice da the official Twitter Bootstrap documentation.
Se vogliamo dare una classe di dissolvenza a tutti loro nasconde il contenuto di tutte le schede. Risposta che almeno una delle schede dovrebbe avere "in" dopo che la classe di fade scritta funzionerà. – Seeker
Credo che questa risposta + @ il commento di PHPSeeker sono le soluzioni più adeguate a questo problema, dal momento che usano le strutture fornite dal framework e quindi rispondono meglio alla domanda come dichiarato (e, personalmente, il riferimento a '.in' mi ha salvato un molto mal di testa proprio ora) – roguesys
Questa dovrebbe essere la risposta accettata. Funziona anche in Bootstrap 3. –
Vedere la risposta di Sanghyun. È il modo corretto per farlo. –
verifica la risposta di @baxang. quello è quello giusto – littlealien