Creating A Next Button For Switching Through Jquery Tabs

How can I create a button that will scroll to the next jQuery tab. I want to have a next button within the tabs that will scroll to the next tab, sort of like a step-by-step tutori

Solution 1:

You can use the selected option to move around, like this:

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

Just change your anchor to match, like this:

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

You can view a demo here

---

Alternatively, make each "Next Tab" link point to a specific tab and use the select method, like this:

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

Then you can use a bit shorter jQuery, and move to any tab you want:

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

Here's a demo of this approach

Solution 2:

I found that with UI 1.10.0 this solution no longer works, as "selected" was deprecated. The following will work in both 1.10 and earlier versions-

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

});

Solution 3:

Based on Nick Craver's answer, here's how I produced the same functionality using next-buttons that look like this in the HTML at the bottom within each tab div:

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

Based on Nick's answer I created two functions:

functionmoveToNextTab()
{
        var selected = $("#tabs").tabs("option", "selected");
        $("#tabs").tabs("option", "selected", selected + 1);
}
functionEnableButtons(className)
{
    //Enable Next buttonsvar aryButton = document.getElementsByTagName("button");
    for(var i = 0; i < aryButton.length; i++)
    {
        var e = aryButton[i];
        if(e.className == className)
        {
            e.onclick = function()
            {
                moveToNextTab();
                returnfalse;
            };
        }
    }   
}

Since each button belongs to the "btnNext" class, after the page loads, I call:

onload = EnableButtons("btnNext");

and this enables each button's ability to move to the next tab.