19

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 tutorial.

How can this be done? My code so far is below.

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

3 Answers 3

24

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:

<a class="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:

<a class="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

3
  • this.hash is the best answer I have seen. +1 Jul 26, 2013 at 16:20
  • please make a circular navigation! Jan 20, 2014 at 16:00
  • Even though this is an old answer, but can somebody explain me what does, and why this.hash works?
    – Aleks
    Feb 6, 2014 at 16:07
13

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

});
1
  • This is the correct answer @user1431891 ! Do not use selected anymore - instead use the active option
    – NFlows
    May 20, 2016 at 5:11
0

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:

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

Based on Nick's answer I created two functions:

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.