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

【问题标题】：How do I open a tab from with jQuery UI Tabs from an link outside of the div?如何从 div 外部的链接中使用 jQuery UI 选项卡打开选项卡？
【发布时间】：2013-01-17 16:31:09
【问题描述】：

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

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

If I load the page as site.com/product#video it does load up the correct tab...but when the tab is not active, and I use a link outside of the #tab div, (ex: 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>

【问题讨论】：

你有什么代码可以分享给我们吗？
在问题中添加了示例代码。
您将不得不向我们提供更多信息。现在看起来你需要用一些 jquery 来解决这个问题。如果它是这样工作的，一个快速修复可能会使 href absolute = hfef="site.com/product#video" 。否则，您将需要 jquery 来查找 hashchange。发送一些链接到喜欢的屏幕截图或 jfiddle？
亲爱的，如果你能解决它，请也看看这个。 stackoverflow.com/questions/20090656/…

标签： jquery-ui jquery-ui-tabs

【解决方案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"));
});

【讨论】：

我可以在此处使用您的脚本进行此操作（请参阅视频缩略图）：store.carbonfibergear.com/… 但出于某种原因，我试图对评论链接做同样的事情（在缩略图下），它不工作。你知道为什么不吗？
尝试将open-tab 类添加到您单击的链接中。我的回答假设用于打开选项卡的链接将具有该类。此外，这段代码：jQuery(document).ready(function () { jQuery('.yotpo .result_status').click(function(){ jQuery('#tabs').tabs('select', "reviews"); }); });，您应该可以删除。如果您愿意，也可以尝试将 reviews 更改为 #reviews 以查看是否可行，但我认为添加该类是更通用的方法。
感谢您的快速响应，不幸的是我无法添加类（代码是从插件中提取的），这就是我使用 .yotpo .result_status 的原因.我尝试做#reviews，但没有运气。从理论上讲，它似乎应该有效，但由于某种原因它不是。还有其他想法吗？
#reviews 没用？这似乎很奇怪。我认为此时我们需要确定jQuery('.yotpo .result_status').click 处理程序实际上正在执行。您也可以尝试使用基于索引的方法，即jQuery('#tabs').tabs('select', 2);
那么链接在页面加载后加载？这应该是问题所在，因为点击处理程序不会附加到任何东西。试试这个：jQuery(document).on('click', '.yotpo .result_status', function() { jQuery('#tabs').tabs('select', "#reviews"); });

【解决方案2】：

使用 jQuery：

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

记住，索引从 0 开始

【讨论】：

你能再深入一点吗，我不确定我是否理解如何利用它来使 div 之外的链接变得有价值？

【解决方案3】：

使用 jquery，将单击事件绑定到打开所需选项卡的链接。

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

【讨论】：

【解决方案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并打开面板。标签（活动，（id的数量-1））

使用

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

panel:"#tabs" // 容器面板

to:"data-href" // 属性名和值

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案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'));
});

【讨论】：