Question

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

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

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

如果#tab div中没有包含选项卡，我如何获得打开选项卡的链接？

CODE

此代码位于标签之外，需要打开#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片段。

这就是href元素的a属性与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"));
});

Answer 2

使用jQuery：

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

请记住，索引从0开始

Answer 3

使用jquery，将点击事件绑定到您打开所需标签的链接。

$('#tabopenlink').click(function() {
    $('#tabs').tabs({active: tabidx});
});

Answer 4

我使用迷你插件。

    (function($) {
    $.fn.tabremote = function(options) {

          var settings = $.extend({
           panel: "#tabs",
           to: "data-to",
        }, options );

        $this=$(this);
        $panel=$(settings.panel);

    $this.click(function(){
                if($(this).attr("href"))
                    {var tos=$(this).attr("href");}
                else
                    {var tos=$(this).attr(settings.to);}

                to=tos.match(/\d/g);
    $panel.tabs({active: to-1});        
    return false;   
    });


        return this;
    }
})(jQuery);

使用href或任何元素打开选项卡。

id面板必须包含面板的编号。示例（1-tabs，tabs-2，...）插件减1并打开面板。标签（有效，（数量为-1））

使用

$("button.href").tabremote({panel:"#tabs",to:"data-href"});

面板：“＃tabs”//容器面板

to：“data-href”//带有值的属性名称

Answer 5

function openTabByLink(link) {
    $("#tabs").find("ul li[aria-controls='"+link+"'] a").trigger("click");
}

Answer 6

如果你使用twitter bootstrap而不是jquery ui，那将非常简单。只需添加data-toggle="tab"并将链接放在页面中的任意位置：

 <a href="#video" data-toggle="tab">Open Video Tab</a>

Answer 7

对于jQuery UI 1.11

HTML：

<div id="tabs">...</div>
...
<a href="#video" class="open-tab">Open Video Tab</a>

JS：

$('.open-tab').click(function () {
  $("#tabs").tabs('option','active',$('#tabs a.ui-tabs-anchor[href="'+$(this).attr('href')+'"]').index('#tabs a.ui-tabs-anchor'));
});

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

7 个答案: