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>
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 );
});
Related videos on Youtube
Author by
user342391
Updated on November 09, 2020Comments
-
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 over 10 yearsthis.hash is the best answer I have seen. +1
-
Francisco Corrales Morales almost 10 yearsplease make a circular navigation!
-
Aleks almost 10 yearsEven though this is an old answer, but can somebody explain me what does, and why
this.hash
works? -
NFlows over 7 yearsThis is the correct answer @user1431891 ! Do not use selected anymore - instead use the active option