19

如何创建一个滚动到下一个 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();
});
4

3 回答 3

24

您可以使用该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);
});

这是这种方法的演示

于 2010-06-15T11:31:08.850 回答
12

我发现使用 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-07T01:55:35.153 回答
0

根据 Nick Craver 的回答，以下是我如何使用在每个选项卡 div 底部的 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-15T19:49:47.767 回答