web-dev-qa-db-ja.com

jQuery UIタブ。インデックスに基づいていないIDに基づいてタブを選択する方法

2つのタブがあり、jQuery UIを構成しました。

_ul  class="tabs"
  li  tabone
  li tabtwo
ul
_

背後のC＃コードから動的に、タブ2を非表示または選択し、他のタブは非表示または非表示にする必要があります。 JavaScriptで.tabs({selected:1});と.tabs(disable:0).を使用してこれを行うことができますが、そのためにタブインデックスを使用したくありません。

名前/ IDに基づいてタブを選択する代替手段はありますか？

jqueryjquery-uijquery-pluginsjquery-selectors
45
user695663

注：jQuery 1.9およびjQuery UIに加えられた変更により、この答えはもはや正しいものではありません。以下の@stankovskiの回答をご覧ください。

最初にタブのインデックス（リスト内の位置）を見つけてから、jQuery UIが提供する選択イベントを使用してタブを具体的に選択する必要があります（ tabs-> select ）。

var index = $('#tabs ul').index($('#tabId'));
$('#tabs ul').tabs('select', index);

更新：ところで-私はこれが（最終的に）まだインデックスで選択していることを理解しています。ただし、タブの特定の位置を知っている必要はありません（特に質問で尋ねられたように動的に生成される場合）。

19
JasCav

受け入れられた答えも私にとってはうまくいきませんでしたが、同様のスレッドで解決策を見つけました： Jquery-UI Tabsで名前で選択したタブに切り替える

var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$('#tabs').tabs('select', index);

JQuery UI> = 1.9の場合：

var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$("#tabs").tabs("option", "active", index);
129
stankovski

最新のドキュメントから、 select メソッドはインデックスまたはタブのパネルのID（hrefハッシュ値）を受け取ります。ドキュメントの状態：

クリックされたかのように、タブを選択します。 2番目の引数は、選択するタブのゼロベースのインデックス、またはタブが関連付けられているパネルのIDセレクターです（タブのhrefフラグメント識別子、たとえばハッシュは、パネルのIDを指します）。

そのため、次のようなレイアウトが与えられます

<div id="myTabs">    
    <ul  class="tabs">
      <li><a href="#tabone">tabone</a></li>
      <li><a href="#tabtwo">tabtwo</a></li>
    </ul>   
</div>

次の作品

$('#myTabs').tabs('select', '#tabtwo');

例 です。

[〜＃〜] update [〜＃〜]

上記のソリューションは、1.9より前のjQuery UIバージョンで機能します。バージョン1.9以降のソリューションについては、@ stankovskiの answer を参照してください。

15
Garett

アクティブな最初のタブ

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

アクティブな最後のタブ

$("#workflowTab").tabs({ active: -1 });

アクティブな2番目のタブ

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

配列のような働き

2
Sarbasish Mishra

他のリスナーがいる場合は副作用がある可能性があり、プラグインAPIを介してやり取りするのと同じくらいいい感じはしませんが、インデックスを設定して設定するのではなく、タブをクリックするだけで冗長なコードが得られますその後アクティブになり、何が起こっているかは非常に直感的です。また、ui-guysがオプションの名前を再度決定しても失敗しません。

$('#tabs').tabs(); 
$('#tabs a[href="#tabtwo"]').click();

ただし、UIタブのコードにメタ関数（_getIndex）コメント付き：

「数値インデックスの代わりにhref文字列を提供するオプションをユーザーに提供するメタ関数」

ただし、有効、無効、ロードを呼び出す場合にのみ、アクティブオプションを設定するときに使用します。

2
Torin Finnemann

これらの答えはどれも私にとってはうまくいきませんでした。私は問題を回避しました。これは私がしました：

$('#tabs-tab1').removeClass('tabs-hide');
$('#tabs-tab2').addClass('tabs-hide');
$('#container-tabs a[href="#tabs-tab2"]').parent().removeClass('tabs-selected');
$('#container-tabs a[href="#tabs-tab1"]').parent().addClass('tabs-selected');

それは素晴らしい作品です。

1
Elisabeth
                <div id="tabs" style="width: 290px">
                    <ul >
                        <li><a id="myTab1" href="#tabs-1" style="color: Green">Báo cáo chuẩn</a></li>
                        <li><a id="myTab2" href="#tabs-2" style="color: Green">Báo cáo mở rộng</a></li>
                    </ul>
                    <div id="tabs-1" style="overflow-x: auto">
                        <ul class="nav">

                            <li><a href="@Url.Content("~/Report/ReportDate")"><span class=""></span>Báo cáo theo ngày</a></li>

                        </ul>
                    </div>
                    <div id="tabs-2" style="overflow-x: auto; height: 290px">
                        <ul class="nav">

                            <li><a href="@Url.Content("~/Report/PetrolReport#tabs-2")"><span class=""></span>Báo cáo nhiên liệu</a></li>
                        </ul>
                    </div>
                </div>


        var index = $("#tabs div").index($("#tabs-1" ));
        $("#tabs").tabs("select", index);
       $("#tabs-1")[0].classList.remove("ui-tabs-hide");
1
Tranvanlam085

これは、インデックスを取得するよりも簡単に機能することがわかりました。私のニーズのために、私はURLハッシュに基づいてタブを選択しています

var target = window.location.hash.replace(/#/,'#tab-');
if (target) { 
    jQuery('a[href='+target+']').click().parent().trigger('keydown');      
}
1
David Smyth

これが答えです

var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$("#tabs").tabs("option", "active", index);
1
daniel medina

@stankovskiの答えに基づいて、すべてのユースケースで機能するより正確な方法（たとえば、タブがajax経由でロードされているため、アンカーのhref属性がハッシュに対応していない場合）、ケースはli要素の「aria-controls」属性に対応します。したがって、たとえば、タブIDに設定されているlocation.hashに基づいてタブをアクティブにしようとする場合、「href」よりも「aria-controls」を探す方が適切です。

JQuery UI> = 1.9の場合：

var index = $('#tabs > ul > li[aria-controls="simple-tab-2"]').parent().index();
$("#tabs").tabs("option", "active", index);

URLハッシュを設定および確認する場合：

タブを作成するときは、 'activate'イベントを使用してlocation.hashをパネルIDに設定します。

$('#tabs').tabs({
  activate: function(event, ui) {                   
      var scrollTop = $(window).scrollTop(); // save current scroll position
      window.location.hash = ui.newPanel.attr('id');
      $(window).scrollTop(scrollTop); // keep scroll at current position
  }    
});

次に、ウィンドウのhashchangeイベントを使用して、location.hashをパネルIDと比較します（li要素のaria-controls属性を探してこれを行います）。

$(window).on('hashchange', function () {
  if (!location.hash) {
    $('#tabs').tabs('option', 'active', 0);
    return;
  }

  $('#tabs > ul > li').each(function (index, li) {
    if ('#' + $(li).attr('aria-controls') == location.hash) {
      $('#tabs').tabs('option', 'active', index);
      return;
    }
  });


});

これは、タブがajaxを使用する場合でも、すべてのケースを処理します。また、タブをネストしている場合は、もう少しロジックを使用して処理することも難しくありません。

1
JohnRDOrazio

UIドキュメントによると：

  1. 最初に、アクティブにするタブのインデックスを取得します。

    var index = $('#tabs a[href="'+id+'"]').parent().index();

  2. 有効化する

    tabs.tabs( "option", "active", index );
1
Mohan Dere

私はこうしました

if (document.location.hash != '') {
   //get the index from URL hash
   var tabSelect = document.location.hash.substr(1, document.location.hash.length);
   console.log("tabSelect: " + tabSelect);
   if (tabSelect == 'discount')
   { 
       var index = $('#myTab a[href="#discount"]').parent().index();
       $("#tabs").tabs("option", "active", index);
       $($('#myTab a[href="#discount"]')).tab('show');
   }
}
0
Developer

$（ "＃tabs"）。tabs（{active：[0,2]、disabled：[3]、selected：2}）;選択は、特定のタブを開くため、またはオンロード時に特定のタブを選択するために使用されます。

0
Durgesh.M

私はあなたが実際に次のようなレイアウトを持っていると思い込んでいます：

<ul  class="tabs">
  <li id="tabone">one</li>
  <li id="tabtwo">two</li>
</ul>

その仮定が正しい場合は、単にIDを使用して「タブ」を選択します

$('#tabone').css("display","none");

編集：レイアウトのタブを選択します：

var index = $('.tabs ul').index($('#tabone')); 
$('.tabs ul').tabs('select', index);
0
Mark Schultheiss