如何通过外部（标签链接以外的其他链接）链接打开jquery ui表

Question

我在我的网页中使用了jquery ui tabs。一切都很好。但是，我希望我可以通过标签链接和其他链接打开下一个标签页。但是，我做不到。我试过fiddle. 在每个选项卡上，都有“下一个”或“上一个”链接，我想通过这些链接相对打开下一个和上一个选项卡（就像第一个选项卡、第二个选项卡和第三个选项卡链接一样）。我应用了与 jquery ui 中使用的选项卡链接相同的技术：

<ul>
    <li><a href="#tabs-1">First Tab</a></li>
    <li><a href="#tabs-2">Second Tab</a></li>
    <li><a href="#tabs-3">Third Tab</a></li>
</ul>

但是，它不起作用：

<a href="#tabs-1" class="left">Previous</a> 
<a href="#tabs-2" class="right">Next</a> 
<a href="#tabs-3" class="right">Next</a>

那么，我怎样才能通过内部/外部链接打开其他标签页呢？

Answer 1

我已经 fork 你的示例并对其进行了更改here!

INDEX 使用$("#tabs").tabs({ active: INDEX }); 设置active 选项卡将允许您导航到任何选项卡。

例如，还有here!：

HTML：

<div id="tabs">
    <ul>
        <li><a href="#tab-1">First Tab</a></li>
        <li><a href="#tab-2">Second Tab</a></li>
    </ul>
    <div id="tab-1"><p>This is first tab!<p>
        <button class="btn-next">Next</button>
        <div class="clear"></div>
    </div>
    <div id="tab-2"><p>This is second tab!<p>
        <button class="btn-prev">Previous</button>
        <div class="clear"></div>
    </div>
</div>

JavaScript：

$(document).ready(function () {

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

    $(".btn-next").click(function() {
        $("#tabs").tabs({ active: 1 });
    });

    $(".btn-prev").click(function() {
        $("#tabs").tabs({ active: 0 });
    });

});