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

Question

这可能有点难以解释,但我会尽我所能.我有一个包含两个标签的产品页面,完整描述和视频.这些都是使用jQuery UI Tabs完成的.

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

如果我将页面加载为site.com/product#video,它会加载正确的选项卡...但是当选项卡未激活时,我使用#tab div之外的链接(例如:视频),它什么都不做

如果#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);
    });
});

所以它的作用是提供指向描述和视频选项卡的链接,这些选项卡在单击链接时被选中.

从这里我们可以看到,在选择特定选项卡时,我们可以使用从零开始的索引或指向我们希望显示的选项卡的href片段.

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

Answer 2

使用jQuery:

$( "#tabs" ).tabs({ active: tabNumber });

请记住,索引从0开始