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

Question

我已经在我的网页中使用了jquery ui tabs。一切都好。但是，我希望我可以通过标签链接和其他链接打开下一个标签页。但是，我无法做到。我曾在fiddle.尝试过。在每个标签上都有＆＃34;下一个＆＃34;或＆＃34;以前＆＃34;我希望相对打开下一个和上一个标签的链接（就像第一个标签，第二个标签和第三个标签链接一样）。我使用了与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

我已经分叉您的示例并对其进行了更改 here!

使用active通过 INDEX 设置 $("#tabs").tabs({ active: INDEX }); 标签，您可以导航到任何标签页。< / p>

例如， 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 });
    });

});