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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (77)

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

这是如何做到的呢?到目前为止,我的代码如下。

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选项来移动,如下所示:

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

只要改变你的主播匹配,就像这样:

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

或者,使每个“下一个制表符”链接指向特定的选项卡,并使用该select方法,如下所示:

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

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

$(".nexttab").click(function() {
    $("#tabs").tabs("select", this.hash);
});
用户回答回答于

我发现,对于UI 1.10.0,这个解决方案不再起作用,因为“Selected”已被废弃。以下内容将适用于1.10和更早版本-

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

});

扫码关注云+社区

领取腾讯云代金券