Création d'un bouton Suivant permettant de basculer entre les onglets jQuery

Question

Comment créer un bouton permettant de passer à l'onglet jQuery suivant. Je veux avoir un bouton suivant dans les onglets qui défilera vers l'onglet suivant, un peu comme un tutoriel étape par étape.

Comment cela peut-il être fait? Mon code jusqu'ici 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 le selected 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 pour correspondre, comme celui-ci:

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

You can view a demo here

---

Vous pouvez également faire de chaque point de lien "Next Tab" à un onglet spécifique et utiliser le select method, 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); 
}); 

Here's a demo of this approach

Answer 2

J'ai trouvé qu'avec UI 1.10.0 cette solution ne fonctionne plus, car "selected" était obsolète. Ce qui suit fonctionnera dans les deux 1.10 et plus tôt versions-

$("#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> 

Basé sur 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; 
      }; 
     } 
    } 
} 

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

onload = EnableButtons("btnNext"); 

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