Question

我在几篇文章中发现可以使用按钮或标签导航JqueryUI标签。

我正在使用这个简单的方法

    $("#vtabs").tabs();

    $("#tabsinner").tabs();

    $(".changeTab").click(function() {
        alert("asdas");
        var selected = $("#tabsinner").tabs("option", "selected");
        $("#tabsinner").tabs("option", "selected", selected + 1);
    });

和html：

<div id="vtabs">
<ul id="verticalUl">
    <li><a href="#vtab-1">Outer Tab 1</a></li>
    <li><a href="#vtab-2">Outer Tab 2</a></li>
    <li><a href="#vtab-3">Outer Tab 3</a></li>
</ul>
<div id="vtab-1">
    <div id="tabsinner" >
        <ul id="horizontalUl">
            <li><a href="#tabsinner-1">Inner Tab 1</a></li>
            <li><a href="#tabsinner-2">Inner Tab 2</a></li>
            <li><a href="#tabsinner-3">Inner Tab 3</a></li>
        </ul>
        <div id="tabsinner-1">
            <h2>Content heading 1</h2>
            <button type="button" class="nexttab">Next Tab</button>
        </div>
        <div id="tabsinner-2">
            <h2>Content heading 2</h2>
            <button type="button" class="nexttab">Next Tab</button>
        </div>
        <div id="tabsinner-3">
            <h2>Content heading 3</h2>
        </div>
    </div>
</div>
<div id="vtab-2">
    <h2>Vertical Tab Content heading 2</h2>       
</div>
<div id="vtab-3">
    <h2>Vertical Tab Content heading 3</h2>
</div>

现在我在左侧使用垂直制表符，而在外部制表符（嵌套制表符）中使用更多水平制表符。现在我认为这不是问题，因为我删除了外部的，但它仍然无法正常工作。

谢谢！

Answer 1

我可以看到2个问题，下一个按钮的类是nexttab，使用的选项是active

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

演示：Fiddle

使用<a> tag</a>在JqueryUI选项卡中导航

1 个答案: