Creación de un botón Siguiente para alternar entre las pestañas jQuery

Question

¿Cómo puedo crear un botón que se desplazará a la siguiente pestaña jQuery? Quiero tener un próximo botón dentro de las pestañas que se desplazará a la siguiente pestaña, algo así como un tutorial paso a paso.

¿Cómo se puede hacer esto? Mi código hasta ahora está debajo.

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

Puede utilizar el selected option para moverse, así:

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

acaba de cambiar su anclaje a la altura, así:

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

You can view a demo here

---

otra parte, hacer cada uno "Next Tab" punto de enlace a una ficha específica y utilizar el select method, así:

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

continuación, puede utilizar un poco más corto jQuery, y mover a cualquier ficha que desea:

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

Here's a demo of this approach

Answer 2

Encontré que con la interfaz de usuario 1.10.0 esta solución ya no funciona, ya que "seleccionado" estaba en desuso. El siguiente trabajo tanto en 1.10 y anteriores versiones-

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

}); 

Answer 3

Sobre la base de la respuesta de Nick Craver, así es como me produjo la misma funcionalidad utilizando los botones siguientes que se ven así en el código HTML en la parte inferior dentro de cada div pestaña:

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

según la respuesta de Nick creé dos funciones:

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; 
      }; 
     } 
    } 
} 

Desde cada botón pertenece a la clase "btnNext", después de que se carga la página, que llamo :

onload = EnableButtons("btnNext"); 

y esto habilita la capacidad de cada botón para pasar a la siguiente pestaña.