jquery - bootstrap - tooltip html

Creando un botón Siguiente para cambiar a través de las pestañas de jQuery

Question

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

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

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

Basado en la respuesta de Nick Craver, aquí es cómo produje la misma funcionalidad usando los siguientes botones que se ven así en el HTML en la parte inferior dentro de cada div pestaña:

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

Basándome en 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;
            };
        }
    }   
}

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

onload = EnableButtons("btnNext");

y esto permite la habilidad de cada botón para moverse a la siguiente pestaña.

Answer 2

Descubrí que con la IU 1.10.0 esta solución ya no funciona, ya que "seleccionado" estaba en desuso. Lo siguiente funcionará tanto en la versión 1.10 como en las anteriores.

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

});

Answer 3

Puedes usar la opción selected para moverte, así:

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

Solo cambia tu ancla para que coincida, de esta manera:

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

Puedes ver una demo aquí

Alternativamente, haga que cada enlace de "Siguiente pestaña" apunte a una pestaña específica y use el método de select , como este:

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

Luego puedes usar jQuery un poco más corto y moverte a la pestaña que quieras:

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

Aquí hay una demostración de este enfoque.