創建下一個按鈕用於切換jQuery選項卡

如何創建一個滾動到下一個jQuery選項卡的按鈕。我希望在選項卡內有一個下一個按鈕，可以滾動到下一個選項卡，有點像一步一步的教程。創建下一個按鈕用於切換jQuery選項卡

如何才能做到這一點？我的代碼到目前爲止在下面。

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>

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

來源

2010-06-15 user342391

可以使用selected option走動，像這樣：

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

只要改變你的錨來匹配，像這樣：

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

You can view a demo here

或者，讓每個「下一個標籤」鏈接指向一個特定的標籤和使用select method，就像這樣：

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

然後你可以使用一個有點短了jQuery，並移動到任何你想要的標籤：

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

來源

2010-06-15 11:31:08

徹底的答案;感謝演示。 – 2013-01-03 21:26:50

this.hash是我見過的最好的答案。 +1 – 2013-07-26 16:20:49

請做出循環導航！ – 2014-01-20 16:00:51

我發現在使用UI 1.10.0時，此解決方案不再有效，因爲「已選擇」已被棄用。下面將同時在1.10和更早版本 -

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

});

來源

2013-02-07 01:55:35 user1431891

這是@ user1431891的正確答案！不要再使用選中 - 而是使用[活動選項]（http://api.jqueryui.com/tabs/#option-active） – NickFlows 2016-05-20 05:11:02

基於尼克Craver的答案，這裏是我如何使用下的按鈕，看起來像這樣在每個選項卡專區內底部的HTML產生相同的功能：

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

基於尼克的回答是我創建了兩個功能：

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

由於每個按鍵屬於「btnNext」類，在頁面加載後，我打電話：

onload = EnableButtons("btnNext");

並且這使得每個按鈕能夠移動到下一個選項卡。

來源

2013-02-15 19:49:47

創建下一個按鈕用於切換jQuery選項卡

回答

相關問題