Création d'un bouton Suivant pour passer à travers les onglets jQuery

Question

Comment puis-je créer un bouton qui défile à l'onglet suivant de jQuery. Je veux avoir un bouton à côté dans les onglets qui défile à l'onglet suivant, un peu comme un tutoriel étape par étape.

Comment cela peut-il être fait? Jusqu'à présent, mon code est ci-dessous.

HTML

<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p> <a href="nexttab">Next Tab</a>
    </div>
    <div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</div>
    <div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</div>
</div>

JS

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

Answer 1

Vous pouvez utiliser la selected l'option pour se déplacer, comme ceci:

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

Il suffit de changer votre point d'ancrage de match, comme ceci:

<a class="nexttab" href="#">Next Tab</a>

Vous pouvez voir une démo ici

---

Vous pouvez également faire chaque point de lien « Next Tab » à un onglet spécifique et utilisez la méthode select , comme ceci:

<a class="nexttab" href="#fragment-2">Next Tab</a>

Ensuite, vous pouvez utiliser un peu plus court jQuery, et passer à un onglet que vous voulez:

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

Voilà une démonstration de cette approche

Answer 2

Je trouve que l'interface utilisateur avec 1.10.0 cette solution de ne fonctionne plus, comme « sélectionné » a été dépréciée. Ce qui suit fonctionnera dans les deux 1.10 et versions antérieures -

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

});

Answer 3

Sur la base de la réponse de Nick Craver, voici comment j'ai produit les mêmes fonctionnalités en utilisant next-boutons qui ressemblent à ceci dans le code HTML en bas de chaque onglet div:

<button class="btnNext" style="float:right">Next</button>

Sur la base de 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)
{
    //Enable Next buttons
    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;
            };
        }
    }   
}

Étant donné que chaque bouton appartient à la classe « btnNext », après le chargement de la page, j'appelle:

onload = EnableButtons("btnNext");

et cela permet la capacité de chaque bouton pour passer à l'onglet suivant.