jQuery टैब के माध्यम से स्विच करने के लिए अगला बटन बनाना

Question

मैं एक बटन कैसे बना सकता हूं जो अगले jQuery टैब पर स्क्रॉल करेगा। मैं टैब के अंदर एक अगला बटन रखना चाहता हूं जो अगले टैब पर स्क्रॉल करेगा, जैसे चरण-दर-चरण ट्यूटोरियल।

यह कैसे किया जा सकता है? मेरा कोड अब तक नीचे है।

एचटीएमएल

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

जे एस

$(document).ready(function() { 
    $("#tabs").tabs(); 
}); 

Answer 1

आप selected option उपयोग कर सकते हैं चारों ओर ले जाने के लिए, इस तरह:

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

बस इस तरह, मैच के लिए अपने लंगर बदलने के लिए:

,

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

तो फिर तुम एक सा कम jQuery का उपयोग कर सकते हैं:

You can view a demo here

---

वैकल्पिक रूप से, select method, इस तरह एक विशिष्ट टैब पर प्रत्येक "अगले टैब" लिंक बिंदु बनाने के लिए और का उपयोग करें और किसी भी टैब पर चलते आप चाहते हैं:

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

Here's a demo of this approach

Answer 2

मैंने पाया कि यूआई 1.10.0 के साथ यह समाधान अब काम नहीं करता है, क्योंकि "चयनित" को बहिष्कृत किया गया था। निम्नलिखित

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

}); 

Answer 3

संस्करणों दोनों 1.10 में काम करेंगे और इससे पहले निक Craver के जवाब के आधार पर, यहाँ कैसे मैं अगली बटन प्रत्येक टैब div भीतर तल पर HTML में इस तरह दिखना का उपयोग कर ही कार्यक्षमता का उत्पादन किया गया है:

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

निक के जवाब के आधार पर मैं दो कार्यों बनाया: चूंकि प्रत्येक बटन "btnNext" वर्ग के अंतर्गत आता है, पृष्ठ लोड करने के बाद, मैं फोन

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

:

onload = EnableButtons("btnNext"); 

और यह प्रत्येक बटन की अगली टैब पर जाने की क्षमता को सक्षम बनाता है।