如何从div外部的链接中使用jQuery UI Tabs打开标签?

对我有用的是:

HTML

<a href="#description" class="open-tab">Open Description Tab</a>
<a href="#video" class="open-tab">Open Video Tab</a>   

<div id="tabs">
    <ul>
        <li>
            <a href="#description">Full description</a>
        </li>
        <li>
            <a href="#video">Video content</a>
        </li>
    </ul>

    <div class="product-collateral">
        <div class="box-collateral box-description">
            <div id="description">
                Content
            </div>
            <div id="video">
                <h2 class="video">Video Content</h2>
            </div>
        </div>
    </div>
</div>

JavaScript

$(document).ready(function () {
    $('#tabs').tabs();

    $('.open-tab').click(function (event) {
        var tab = $(this).attr('href');
        $('#tabs').tabs('select', tab);
    });
});

因此，这是提供指向描述和视频选项卡的链接，单击链接时会选择这些选项卡.

So what this does is provide a link to both the description and video tabs, which are selected when the link is clicked.

在此处中，我们可以看到，选择特定标签时，我们可以使用零-基于索引或href片段，它指向我们希望显示的标签.

From here we can see that when selecting a particular tab, we can use either a zero-based index or the href fragment which points to the tab we wish to display.

这就是为什么a元素的href属性与div元素的ID相匹配的原因-单击该元素时，其href片段随后用于设置所选标签.

This is why the href attributes of the a elements match up with the Ids of the div elements - when one is clicked its href fragment is then used to set the selected tab.

jQuery UI 1.11的更新

随着jQuery UI的发展，具有用于设置活动选项卡的API.从jQuery UI 1.11开始，以下代码将选择活动标签:

As jQuery UI has evolved, so to has the API for setting the active tab. As of jQuery UI 1.11, the following code will select the active tab:

//Selects by the zero-based index
$('#tabs').tabs("option", "active", index);

现在，因为我们现在必须提供一个从零开始的索引，所以我最初提供的代码将不再起作用.

Now because we now have to provide a zero-based index, the code I initially provided will no longer work.

我们现在需要的是可以实际使用的索引.一种方法是:

What we need now is an index that can actually be used. One approach is:

$('.open-tab').click(function (event) {
    var index = $("selector-of-clicked-tab").index();
    $('#tabs').tabs("option", "active", index);
});

另一种方法是使用HTML5 data-属性:

Another is to use HTML5 data- attributes:

<a href="#description" class="open-tab" data-tab-index="0">Open Description Tab</a>
<a href="#video" class="open-tab" data-tab-index="1">Open Video Tab</a>

因此，您可以在处理以下链接的点击时执行此操作:

So you can do this when handling the click of these links:

$('.open-tab').click(function (event) {
    $('#tabs').tabs("option", "active", $(this).data("tab-index"));
});