Come creare un pulsante "next" che commuta le schede utilizzando Java Script e Twitter Bootstrap

ho il seguente codice: http://jsfiddle.net/h6rQ2/2/Come creare un pulsante "next" che commuta le schede utilizzando Java Script e Twitter Bootstrap

sto usando HTML per creare una forma di base. Questo modulo ha due sezioni: ciascuna sezione è contenuta in una scheda (schede create con Twitter Bootstrap).

Come si crea un pulsante "successivo" che passa dalla prima scheda alla seconda scheda? Quando provo a farlo ora, invia solo il modulo. Twitter Bootstrap fornisce già una funzione che ti consente di cambiare scheda tramite un pulsante esterno? Se sì, come lo usi?

fonte

2012-08-09 goelv

Che cosa hai provato? [Questo] (http://twitter.github.com/bootstrap/javascript.html#tabs) mostra come selezionare una scheda specifica utilizzando JS. Ora hai solo bisogno di capire come ottenere il fratello successivo dell'elemento corrente. – sachleen

Ho creato un pulsante che chiama la seguente funzione: $ (function next() {$ ('# tab_bar a: last'). Tab ('show');}). Ho due problemi però: (1) Quando carico la pagina, la seconda scheda è già attiva mentre voglio che la prima scheda sia attiva (2) Quando premo il pulsante, invia il modulo prima di passare alla seconda scheda . Sono nuovo in questo modo, quindi sono sicuro di ignorare qualcosa di importante – goelv

Ho avuto la sensazione che le funzioni fornite con Twitter Bootstrap potrebbero essere utilizzate per ottenere ciò di cui ho bisogno. Ma non sono sicuro di come usarli esattamente – goelv

A fronte di tali pulsanti:

<div class="btn-group"> 
    <button class="btn" id="prevtab" type="button">Prev</button> 
    <button class="btn" id="nexttab" type="button">Next</button> 
</div>

avreste bisogno questo JS:

var $tabs = $('.tabbable li'); 

$('#prevtab').on('click', function() { 
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show'); 
}); 

$('#nexttab').on('click', function() { 
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show'); 
});

Working demo (jsfiddle)

fonte

2012-08-09 10:06:42 Sherbrow

C'è un modo in cui dovrei aggiungere il javascript? Ho copiato il codice javascript in un file separato e ho chiamato quel file nella testa del mio html. Comunque non funziona ancora, e sono alla fine della mia corda. – goelv

ok, dopo alcuni test approfonditi, sono abbastanza sicuro che non sto caricando il tuo javascript correttamente. Ecco come ho fatto al momento: con il tuo codice semplicemente copia-incolla nel file "custom.js". Sto facendo qualcosa di sbagliato? – goelv

@goelv È necessario * attendere * perché dom sia pronto a farlo. La demo funziona perché jsfiddle lo fa per impostazione predefinita. Controlla [questo documento] (http://api.jquery.com/jQuery/#jQuery3) e inserisci il mio codice all'interno di una funzione che verrà chiamata solo dopo che dom è pronto. – Sherbrow

Per rendere più ciclico (ultima scheda va alla prima, prima scheda va a durare), ecco il mio codice:

function previousVin(){ 
    var previousElement = $('#myTab li').filter('.active').prev('li').find('a[data-toggle="tab"]'); 
    if(previousElement.html()===undefined){ 
     $('#myTab a:last').tab('show'); 
    }else{ 
     previousElement.tab('show'); 
    } 
} 
function nextVin(){ 
    var nextElement = $('#myTab li').filter('.active').next('li').find('a[data-toggle="tab"]'); 
    if(nextElement.html()===undefined){ 
     $('#myTab a:first').tab('show'); 
    }else{ 
     nextElement.tab('show'); 
    } 
}

fonte

2014-01-21 11:16:49 hugsbrugs

-1

Per bootstrap 3

$('a[data-toggle^="tab"]').click(function(){ 
    var data = $(this).attr("href"); 
    $('a[data-toggle^="tab"]').parent("li").removeClass("active"); 
    $('li a[href^="'+data+'"]').parent("li").addClass("active"); 
    $('.tab-pane').removeClass("active"); 
    $(data).addClass("active"); 
})

È possibile aggiungere collegamenti come questi ovunque

<a href="#tabname2" data-toggle="tab">Next</a> 
<a href="#tabname1" data-toggle="tab">Previous</a>

fonte

2014-06-03 15:03:44

Come creare un pulsante "next" che commuta le schede utilizzando Java Script e Twitter Bootstrap

risposta

Problemi correlati