web-dev-qa-db-ja.com

divの外部のリンクからjQuery UIタブでタブを開くにはどうすればよいですか？

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

ページのこのセクションの上にサムネイル付きの商品画像がありますが、サムネイルの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>
jquery-uijquery-ui-tabs
12
callmedpit

私のために働いたのはこれでした：

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

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

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

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

もう1つは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"));
});
25
nick_w

jQueryを使用：

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

索引付けは0から始まることに注意してください

9
chuckfinley

Jqueryを使用して、必要なタブを開くリンクにクリックイベントをバインドします。

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

ミニプラグインを使用しています。

    (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" //値を持つ属性名

0
Jirkaz

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

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

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'));
});
0
Andrey Radomanov
function openTabByLink(link) {
    $("#tabs").find("ul li[aria-controls='"+link+"'] a").trigger("click");
}
0
Pedro Soares