创建一个用于切换 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>

JS

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

您可以使用selected option http://jqueryui.com/demos/tabs/#option-selected四处走动，像这样：

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

只需更改您的锚点即可匹配，如下所示：

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

您可以在此处查看演示 http://jsfiddle.net/RaaDV/

或者，使每个“下一个选项卡”链接指向特定选项卡并使用select method http://jqueryui.com/demos/tabs/#method-select， 像这样：

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

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

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

这是此方法的演示 http://jsfiddle.net/RaaDV/1/