Créer un bouton Suivant pour changer d'onglets avec jQuery

Question

Comment puis-je créer un bouton qui fera défiler jusqu'au prochain onglet jQuery. Je veux avoir un bouton suivant à l'intérieur des onglets qui fera défiler jusqu'au prochain onglet, un peu comme un tutoriel étape par étape.

Comment cela peut-il être fait? Mon code jusqu'à présent est ci-dessous.

HTML

        Un
        Deux
        Trois

        Le premier onglet est actif par défaut : Onglet suivant

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

JS

$(document).ready(function () {
    $("#tabs").tabs();
});

Answer 1

Vous pouvez utiliser l'option sélectionnée pour vous déplacer, comme ceci :

$(".nexttab").click(function() {
    var selected = $("#tabs").tabs("option", "selected");
    $("#tabs").tabs("option", "selected", selected + 1);
});

Il suffit de changer votre lien pour correspondre, comme ceci :

Onglet Suivant

Vous pouvez voir une démo ici

---

Alternativement, faites en sorte que chaque lien "Onglet suivant" pointe vers un onglet spécifique et utilisez la méthode sélectionner, comme ceci :

Onglet Suivant

Ensuite, vous pouvez utiliser un peu de jQuery plus court, et vous déplacer vers n'importe quel onglet que vous voulez :

$(".nexttab").click(function() {
    $("#tabs").tabs("select", this.hash);
});

Voici une démo de cette approche

Answer 2

J'ai constaté qu'avec UI 1.10.0, cette solution ne fonctionne plus, car "selected" a été déprécié. La solution suivante fonctionnera à la fois dans la version 1.10 et dans les versions précédentes-

$("#tabs").tabs();
$(".nexttab").click(function() {
    var active = $( "#tabs" ).tabs( "option", "active" );
    $( "#tabs" ).tabs( "option", "active", active + 1 );

});

Answer 3

Basé sur la réponse de Nick Craver, voici comment j'ai obtenu la même fonctionnalité en utilisant des boutons suivants qui ressemblent à ceci dans le HTML en bas de chaque onglet :

Suivant

D'après la réponse de Nick, j'ai créé deux fonctions :

function moveToNextTab()
{
        var selected = $("#tabs").tabs("option", "selected");
        $("#tabs").tabs("option", "selected", selected + 1);
}
function EnableButtons(className)
{
    //Activer les boutons suivants
    var aryButton = document.getElementsByTagName("button");
    for(var i = 0; i < aryButton.length; i++)
    {
        var e = aryButton[i];
        if(e.className == className)
        {
            e.onclick = function()
            {
                moveToNextTab();
                return false;
            };
        }
    }   
}

Puisque chaque bouton appartient à la classe "btnNext", après le chargement de la page, j'appelle :

onload = EnableButtons("btnNext");

et cela permet à chaque bouton de pouvoir passer à l'onglet suivant.