Tworzenie przycisku Next do przełączania kart jQuery

Question

Jak utworzyć przycisk, który będzie przewijany do następnej zakładki jQuery. Chcę mieć następny przycisk w zakładkach, który przejdzie do następnej karty, przypominający samouczek krok po kroku.

Jak można tego dokonać? Mój kod do tej pory znajduje się poniżej.

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

Można użyć selected option do poruszania się, jak to:

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

Wystarczy zmienić swoją kotwicę, aby dopasować, tak:

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

You can view a demo here

---

Alternatywnie, by każdy "Następna zakładka" punkt link do konkretnej karty i używać select method coś takiego:

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

Następnie można użyć trochę krótsza jQuery, i przejdź do dowolnej karty, którą chcesz:

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

Answer 2

Znalazłem, że z UI 1.10.0 to rozwiązanie już nie działa, ponieważ "wybrany" został uznany za przestarzały. Następujące będzie działać zarówno w 1.10 i wcześniejszych versions-

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

}); 

Answer 3

podstawie odpowiedzi Nick Craver, oto jak ja produkowane taką samą funkcjonalność przy użyciu nowej przyciski, które wyglądają jak to w HTML na dole w obrębie każdego div zakładce:

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

oparciu o odpowiedź Nicka stworzyłem dwie funkcje:

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

Ponieważ każdy przycisk należy do klasy „btnNext”, po załadowaniu strony, wzywam :

onload = EnableButtons("btnNext"); 

i umożliwia to każdemu przyciskowi przejście do kolejnej zakładki.