Creating a Next button for switching through jQuery tabs

41,669

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:

<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

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

});
Share:
41,669

Related videos on Youtube

user342391
Author by

user342391

Updated on November 09, 2020

Comments

  • user342391
    user342391 about 3 years

    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();
    });
    
  • Joe Johnston
    Joe Johnston over 10 years
    this.hash is the best answer I have seen. +1
  • Francisco Corrales Morales
    Francisco Corrales Morales almost 10 years
    please make a circular navigation!
  • Aleks
    Aleks almost 10 years
    Even though this is an old answer, but can somebody explain me what does, and why this.hash works?
  • NFlows
    NFlows over 7 years
    This is the correct answer @user1431891 ! Do not use selected anymore - instead use the active option

Related