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

Question

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

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

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

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

代码

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

<a href="#video">Open Video Tab</a>

标签代码

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="product-tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-hover"><a href="#description">Full Description</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#video">Video</a></li>
</ul>
<div class="product-collateral">
    <div class="box-collateral box-description">
        <div id="description" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
           Content
        </div>
        <div id="video" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
            <h2 class="video">Video Content</h2>
        </div>
    </div>
</div>
</div>

Answer 1

对我有用的是:

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

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

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

这就是为什么 a 元素的 href 属性与 div 元素的 Id 匹配的原因 - 当单击一个元素时其 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);
});

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

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