Tạo nút Tiếp theo để chuyển qua các tab jQuery

Question

Làm cách nào để tạo một nút sẽ cuộn đến tab jQuery tiếp theo. Tôi muốn có một nút tiếp theo trong các tab sẽ cuộn đến tab tiếp theo, giống như một hướng dẫn từng bước.

Làm cách nào để thực hiện điều này? Mã của tôi cho đến nay là dưới đây.

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

Bạn có thể sử dụng selected option để di chuyển xung quanh, như thế này:

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

Chỉ cần thay đổi neo của bạn để phù hợp với, như thế này:

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

You can view a demo here

---

Ngoài ra, làm cho mỗi "Next Tab" điểm liên kết đến một tab cụ thể và sử dụng select method, như thế này:

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

Sau đó, bạn có thể sử dụng một chút ngắn hơn jQuery, và chuyển đến bất kỳ tab nào bạn muốn:

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

Here's a demo of this approach

Answer 2

Tôi nhận thấy rằng với giao diện người dùng 1.10.0, giải pháp này không còn hoạt động nữa vì "đã chọn" không được chấp nhận. Sau đây sẽ làm việc trong cả 1.10 và trước đó versions-

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

}); 

Answer 3

Dựa trên câu trả lời Nick Craver của, dưới đây là cách tôi tạo ra các chức năng tương tự sử dụng tiếp theo nút mà trông như thế này trong HTML ở dưới cùng trong mỗi div tab:

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

Dựa trên câu trả lời của Nick tôi tạo ra hai chức năng:

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

Vì mỗi nút thuộc về lớp "btnNext", sau khi tải trang, tôi gọi :

onload = EnableButtons("btnNext"); 

và điều này cho phép khả năng của mỗi nút chuyển sang tab tiếp theo.