12

这可能有点难以解释，但我会尽力而为。我有一个带有两个选项卡、完整描述和视频的产品页面。这些是使用 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), it不做任何事情。

如果标签不包含在#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>
4

7 回答 7

26

对我有用的是：

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

另一种是使用 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"));
});
于 2013-01-24T09:05:21.753 回答
9

使用 jQuery：

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

请记住，索引从 0 开始

于 2013-01-22T09:10:35.053 回答
3

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

$('#tabopenlink').click(function() {
    $('#tabs').tabs({active: tabidx});
});
于 2013-05-09T13:48:31.777 回答
0

我使用迷你插件。

    (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 panel 必须包含面板的编号。示例 (1-tabs, tabs-2, ...) 插件减 1 并打开面板。选项卡（活动，（id 数 -1））

利用

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

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

to:"data-href" // 带有值的属性名

于 2013-11-12T16:46:25.373 回答
0

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

 <a href="#video" data-toggle="tab">Open Video Tab</a>
于 2016-09-10T22:48:58.027 回答
0 
function openTabByLink(link) {
    $("#tabs").find("ul li[aria-controls='"+link+"'] a").trigger("click");
}
于 2016-09-03T13:55:38.627 回答
0

对于 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'));
});
于 2020-02-04T10:48:41.700 回答