创建一个用于切换 jQuery 选项卡的 Next 按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3044654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a Next button for switching through jQuery tabs
提问by user342391
How can I create a button that will scroll to the next jQuery tab. I want to have a next button within the tabs that will scroll to the next tab, sort of like a step-by-step tutorial.
如何创建将滚动到下一个 jQuery 选项卡的按钮。我想在选项卡内有一个下一个按钮，可以滚动到下一个选项卡，有点像分步教程。
How can this be done? My code so far is below.
如何才能做到这一点？到目前为止，我的代码如下。
HTML
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
JS
$(document).ready(function () {
$("#tabs").tabs();
});
回答by Nick Craver
You can use the selectedoptionto move around, like this:
您可以使用该selected选项四处移动，如下所示：
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
});
Just change your anchor to match, like this:
只需更改您的锚点以匹配，如下所示：
<a class="nexttab" href="#">Next Tab</a>
Alternatively, make each "Next Tab" link point to a specific tab and use the selectmethod, like this:
或者，使每个“下一个选项卡”链接指向特定选项卡并使用select方法，如下所示：
<a class="nexttab" href="#fragment-2">Next Tab</a>
Then you can use a bit shorter jQuery, and move to any tab you want:
然后你可以使用更短的 jQuery，并移动到你想要的任何选项卡：
$(".nexttab").click(function() {
$("#tabs").tabs("select", this.hash);
});
回答by user1431891
I found that with UI 1.10.0 this solution no longer works, as "selected" was deprecated. The following will work in both 1.10 and earlier versions-
我发现在 UI 1.10.0 中，这个解决方案不再有效，因为“selected”已被弃用。以下内容适用于 1.10 和更早版本-
$("#tabs").tabs();
$(".nexttab").click(function() {
var active = $( "#tabs" ).tabs( "option", "active" );
$( "#tabs" ).tabs( "option", "active", active + 1 );
});
回答by Lonnie Best
Based on Nick Craver's answer, here's how I produced the same functionality using next-buttons that look like this in the HTML at the bottom within each tab div:
根据 Nick Craver 的回答，以下是我如何使用下一个按钮生成相同功能的方法，这些按钮在每个选项卡 div 底部的 HTML 中如下所示：
<button class="btnNext" style="float:right">Next</button>
Based on Nick's answer I created two functions:
根据尼克的回答，我创建了两个函数：
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;
};
}
}
}
Since each button belongs to the "btnNext" class, after the page loads, I call:
由于每个按钮都属于“btnNext”类，在页面加载后，我调用：
onload = EnableButtons("btnNext");
and this enables each button's ability to move to the next tab.
这使每个按钮都能够移动到下一个选项卡。
