web-dev-qa-db-ja.com

Jquery-UIタブで名前で選択したタブに切り替える

3つのタブがある場合：

<div id="tabs">
    <ul>
        <li><a href="#sample-tab-1"><span>One</span></a></li>
        <li><a href="#sample-tab-2"><span>Two</span></a></li>
        <li><a href="#sample-tab-3"><span>Three</span></a></li>
    </ul>
</div>

名前で＃sample-tab-2に交換したいと思います。タブの番号を知っていればタブに切り替えられることは知っていますが、偶然見つけた場合にはそれを知りません。

注：JQuery 1.3.1/JQuery-UI 1.6rc6

jquery-uitabs
50
Rob

前の答えを得ることができませんでした。名前でタブのインデックスを取得するには、次のことを行いました。

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

Idを使用すると、インデックスと同様に機能するようです。単にこれを行うと、箱から出して動作します...

$("#tabs").tabs("select", "#sample-tab-1");

これは official docs で文書化されています：

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

これは、この質問が行われた後、おそらくほとんどの答えの後に追加されたと思われます

33
Eran Medan
$('#tabs').tabs('select', index);

メソッド '' select 'はjquery ui 1.10.0ではサポートされていません。 http://api.jqueryui.com/tabs/

私はこのコードを使用し、正しく動作します：

  $('#tabs').tabs({ active: index });
26
hamid reza mansouri

次のスクリプトを使用して、名前でタブのインデックスを取得できます。

var index = $('#tabs ul').index($('#simple-tab-2'));
$('#tabs ul').tabs('select', index);
12
bdukes

このコードのみが実際に機能します！

$('#tabs').tabs();
$('#tabs').tabs('select', '#sample-tab-2');
6
xmoonlight

この機能を使用します。

function uiTabs(i){
    $("#tabs").tabs("option", "selected", i);
}

そして、次のコードを使用してタブを切り替えます。

<a onclick="uiTabs(0)">Tab 1</a>
<a onclick="uiTabs(1)">Tab 2</a>
<a onclick="uiTabs(2)">Tab 3</a>
5
Hamidreza

次の作品は私のために働いた

$($("#tabs")[0]).tabs({selected: 1});

お役に立てれば！

3
Sandeep

これを試してください：「選択」/「アクティブ」タブ

<article id="gtabs">
    <ul>
        <li><a href="#syscfg" id="tab-sys-cfg" class="tabtext">tab One</a></li>
        <li><a href="#ebsconf" id="tab-ebs-trans" class="tabtext">tab Two</a></li>
        <li><a href="#genconfig" id="tab-general-filter-config" class="tabtext">tab Three</a></li>
    </ul>

var index = $('#gtabs a[href="#general-filter-config"]').parent().index();

// `'select'はjquery uiバージョン1.10.0でサポートしていません

$('#gtabs').tabs('select', index);

代替ソリューション：「アクティブ」を使用：

$('#gtabs').tabs({ active: index });
3
Muru Bakthavachalam

タブのゼロベースのインデックスを取得する唯一の実用的な方法は、タブセット（LI> A）を作成し、それらの内部テキストで一致する各要素をステップスルーすることです。それはおそらくよりクリーンな方法で行うことができますが、ここに私がそれをした方法があります。

$('#tabs ul li a').each(function(i) {
    if (this.text == 'Two') {$('#reqTab').val(i)}
});

$("#tabs").tabs({
    selected: $('#reqTab').val()
});

ページで非表示の<input id = "reqTab">フィールドを使用して、変数が1つの関数から別の関数に移動したことを確認できます。

注：ちょっとした落とし穴があります-タブセットがアクティブになった後にタブを選択しても、jQuery UI 1.8でアドバタイズされたように機能しないようです。目的のタブを選択します。

3
Wes

選択したタブを名前で取得するサンプルコードを次に示します。これがypurソリューションを見つける助けになることを願っています：

<html>
<head>
<script type="text/javascript"><!-- Don't forget jquery and jquery ui .js files--></script>
<script type="text/javascript">
   $(document).ready(function(){
     $('#tabs').show();

     // shows the index and tab title selected
     $('#button-id').button().click(function(){
         var selTab = $('#tabs .ui-tabs-selected');
         alert('tab-selected: '+selTab.index()+'-'+ selTab.text());
     });
  });
</script>
</head>
<body>
   <div id="tabs">
      <ul id="tablist">
            <li><a href='forms/form1.html' title="form_1"><span>Form 1</span></a></li>
            <li><a href='forms/form2' title="form_2"><span>Form 2</span></a></li>
      </ul>
   </div>
    <button id="button-id">ClickMe</button>
</body>
</html>
1
Vikram

@bdukeの答えは、実際にはわずかな調整で機能します。

var index = $("#tabs>div").index($("#simple-tab-2"));
$("#tabs").tabs("select", index);

上記は次のようなものを想定しています。

<div id="tabs">
  <ul>
    <li><a href="#simple-tab-0">Tab 0</a></li>
    <li><a href="#simple-tab-1">Tab 1</a></li>
    <li><a href="#simple-tab-2">Tab 2</a></li>
    <li><a href="#simple-tab-3">Tab 3</a></li>
  </ul>
  <div id="simple-tab-0"></div>
  <div id="simple-tab-1"></div>
  <div id="simple-tab-2"></div>
  <div id="simple-tab-3"></div>
</div>

jQueryUIはタブのID/HREFセレクターを使用した「選択」の呼び出しをサポートするようになりましたが、タブを作成するとき、「選択」オプションは数値インデックスのみをサポートします。

私の投票は、私を正しい方向に導いてくれた公爵に向けられます。ありがとう！

1
cautionbug

Hrefを変更する場合、リンクにIDを割り当てることができます<a href="#sample-tab-1" id="tab1"><span>One</span></a>これにより、IDでタブインデックスを見つけることができます。

1
kiev
$('#tabs a[href="#sample-tab-1"]').click();

または、リンクにIDを割り当てることができます

<a href="#sample-tab-1" id="tab1">span>One</span></a>

そのため、そのIDを見つけることができます。

$('#tab1').click();
0
Dimasbka

特定のタブインデックスをアクティブに設定します。

$(this).tabs({ active: # }); /* Where # is the tab index. The index count starts at 0 */

最後のタブをアクティブに設定

$(this).tabs({ active: -1 });

IDで特定のタブを設定します。

$(this).tabs({ active: $('a[href="#tab-101"]').parent().index() });
0
Carl

JQuery UIの古いバージョンに基づいているため、答えを得るのに苦労しました。 1.11.4（ CDN Reference ）を使用しています。

ここに私のFiddle=動作中のコード： http://jsfiddle.net/6b0p02um/ 私は4つまたは5つの異なるスレッドからビットをつなぎ合わせて私のものを取得しました作業：

    $("#tabs").tabs(); 

    //selects the tab index of the <li> relative to the div it is contained within
    $(".btn_tab3").click(function () {
        $( "#tabs" ).tabs( "option", "active", 2 );
    });         

    //selects the tab by id of the <li>
    $(".btn_tab3_id").click(function () {
      function selectTab(tabName) {
          $("#tabs").tabs("option", "active", $(tabName + "").index());
      }

      selectTab("#li_ui_id_3");
    });
0
David Pickering