如何从 div 外部的链接使用 jQuery UI 选项卡打开选项卡？

这可能有点难以解释，但我会尽力。我有一个产品页面，有两个选项卡、完整说明和视频。这些是使用 jQuery UI 选项卡完成的。

在页面的这一部分上方，我有一个带有缩略图的产品图像...但我希望其中一个缩略图成为查看视频的链接（当然，该链接包含在视频选项卡中）。

如果我将页面加载为 site.com/product#video，它会加载正确的选项卡...但是当选项卡未处于活动状态，并且我使用 #tab div 外部的链接（例如：视频）时，它没有做任何事情。

如果#tab div 中未包含该选项卡，如何获取打开该选项卡的链接？

CODE

此代码位于选项卡之外，需要打开#video 选项卡

对我有用的是：

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);
    });
});

因此，它的作用是提供一个指向描述和视频选项卡的链接，单击链接时将选择这些选项卡。

From here我们可以看到，当选择特定选项卡时，我们可以使用从零开始的索引或指向我们希望显示的选项卡的 href 片段。

这就是为什么href的属性a元素与 ID 匹配divelements - 当单击一个元素时，其 href 片段将用于设置选定的选项卡。

jQuery UI 1.11 更新

随着 jQuery UI 的发展，也有了用于设置活动选项卡的 API。从 jQuery UI 1.11 开始，以下代码将选择活动选项卡：

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

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

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

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

另一种是使用HTML5data-属性：

<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>

因此，您可以在处理这些链接的点击时执行此操作：

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