创建用于切换jQuery选项卡的Next按钮

如何创建一个滚动到下一个jQuery选项卡的按钮。 我想在选项卡中有一个下一个按钮，它将滚动到下一个选项卡，有点像一个分步教程。

如何才能做到这一点？ 到目前为止，我的代码如下。

HTML

 
 
One
 
Two
 
Three
 
 
 
First tab is active by default:
 Next Tab 
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  

JS

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

Answer 1

您可以使用selected选项移动，如下所示：

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

只需将您的锚更改为匹配，如下所示：

 Next Tab 

您可以在此处查看演示

---

或者，将每个“Next Tab”链接指向特定选项卡并使用select方法 ，如下所示：

 Next Tab 

然后你可以使用更短的jQuery，并移动到你想要的任何选项卡：

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

这是这种方法的演示

Answer 2

我发现使用UI 1.10.0时，此解决方案不再有效，因为“已选择”已弃用。 以下内容适用于1.10及更早版本 –

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

Answer 3

根据Nick Craver的回答，这里是我如何使用每个tab div底部HTML中的下一个按钮生成相同的function：

 Next 

根据Nick的回答，我创建了两个函数：

 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"); 

这使每个按钮能够移动到下一个选项卡。