Cambia dinamicamente l'indice della scheda attiva Schede dell'interfaccia utente jQuery: jquery, jquery-ui, jquery-ui-tabs

Sto cercando di creare un insieme di due pulsanticambierà la scheda attiva in jQuery Ui. Quello che voglio fare è ottenere l'indice di tabulazione attivo, quindi andare alla scheda successiva o alla scheda precedente, in base a quale pulsante viene premuto.

Ad esempio, se la scheda attiva è il numero 3, facendo clic su "moveLeft" lo si cambierà in 2. Se si fa clic su "moveRight", lo cambierà in 4. So che è qualcosa di simile al seguente, ma non del tutto:

var activeTab = $( ".tabs" ).tabs( "option", "active" );

$("#moveLeft").click(function() {
$(".tabs" ).tabs({ activeTab: -1 });
});
$("#moveRight").click(function() {
$(".tabs" ).tabs({ activeTab: +1 });
});

risposte:

Capisco che devi aggiungere i pulsanti prev / next. Ne avevo bisogno per un processo con passaggi. Ho usato le schede dell'interfaccia utente di jquery e questo ha funzionato per me:

<script type="text/javascript">
$(document).ready(function() {
$("#ui-tabs").tabs();
function GetSelTabIndex() {
return $("#ui-tabs").tabs("option", "active");
}
function ShowTabs(stepN) {
var n = parseInt(stepN);
$("#ui-tabs").tabs("option", "active", parseInt(GetSelTabIndex()) + n);
}

$("#moveLeft, #moveRight").click(function () {
ShowTabs(this.value);
})
});
</script>

html:

<button id="moveLeft" value="-1">Previous tab</button>
<button id="moveRight" value="1">Next tab</button>