Erstellen einer Next-Schaltfläche zum Wechseln durch die jQuery-Registerkarten

Question

Wie kann ich eine Schaltfläche erstellen, die zur nächsten jQuery-Registerkarte blättert? Ich möchte eine nächste Schaltfläche innerhalb der Tabs haben, die zum nächsten Tab blättern wird, ähnlich wie eine Schritt-für-Schritt-Anleitung.

Wie kann das gemacht werden? Mein Code ist so weit unten.

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

Sie die selected option verwenden können, um sich frei zu bewegen, wie folgt aus:

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

einfach Ihren Anker entsprechend ändern, wie folgt aus:

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

You can view a demo here

---

Alternativ machen jedes "Next Tab" Link Punkt auf eine bestimmte Registerkarte und verwenden Sie die select method, wie folgt aus:

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

Dann können Sie ein bisschen kürzer jQuery verwenden, weg- und an einer beliebigen Registerkarte Sie wollen:

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

Here's a demo of this approach

Answer 2

Ich fand, dass mit UI 1.10.0 diese Lösung nicht mehr funktioniert, da "ausgewählt" veraltet war. Im Folgenden wird sowohl 1.10 arbeiten und früher Versions-

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

}); 

Answer 3

Basierend auf Nick Craver Antwort, hier ist, wie ich die gleiche Funktionalität mit der nächsten Tasten erzeugt, die in jedem Register div am unteren Rand in der HTML wie folgt aussehen:

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

auf Nicks Antwort Basierend habe ich zwei Funktionen:

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

Da jede Taste auf der „btnNext“ Klasse gehört, nachdem die Seite geladen wird, rufe ich :

und dies ermöglicht jeder Schaltfläche die Möglichkeit, zur nächsten Registerkarte zu gelangen.