12

これを説明するのは少し難しいかもしれませんが、私は最善を尽くします。完全な説明とビデオの2つのタブがある製品ページがあります。これらは、jQueryUIタブを使用して実行されます。

ページのこのセクションの上にサムネイル付きの製品画像があります...しかし、サムネイルの1つをビデオを表示するためのリンクにします（もちろん、ビデオタブに含まれています）。

ページを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>
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フラグメントが選択されたタブの設定に使用されます。

jQueryUI1.11の更新

jQuery UIが進化するにつれて、アクティブなタブを設定するためのAPIも進化しました。jQuery UI 1.11以降、次のコードでアクティブなタブが選択されます。

//Selects by the zero-based index
$('#tabs').tabs("option", "active", index);

ゼロベースのインデックスを提供する必要があるため、最初に提供したコードは機能しなくなります。

今必要なのは、実際に使用できるインデックスです。1つのアプローチは次のとおりです。

$('.open-tab').click(function (event) {
    var index = $("selector-of-clicked-tab").index();
    $('#tabs').tabs("option", "active", index);
});

もう1つは、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-タブ、タブ-2、...）プラグインは1を減算し、パネルを開きます。タブ（アクティブ、（IDの数-1））

使用する

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

panel： "＃tabs"//コンテナパネル

to："data-href"//値を持つ属性名

于 2013-11-12T16:46:25.373 に答える
0 
function openTabByLink(link) {
    $("#tabs").find("ul li[aria-controls='"+link+"'] a").trigger("click");
}
于 2016-09-03T13:55:38.627 に答える
0

jqueryuiの代わりにtwitterbootstrapを使用すると、非常に簡単になります。data-toggle="tab"ページ内の好きな場所にリンクを追加して配置するだけです。

 <a href="#video" data-toggle="tab">Open Video Tab</a>
于 2016-09-10T22:48:58.027 に答える
0

jQueryUI1.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 に答える