52

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

4

15 に答える 15

87

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

var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$('#tabs').tabs('select', index);
于 2011-01-10T11:04:01.277 に答える
26 
$('#tabs').tabs('select', index);

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

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

  $('#tabs').tabs({ active: index });
于 2013-02-14T16:42:49.070 に答える
12

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

var index = $('#tabs ul').index($('#simple-tab-2'));
$('#tabs ul').tabs('select', index);
于 2009-02-23T16:52:49.177 に答える
6

このコードだけが実際に機能します!

$('#tabs').tabs();
$('#tabs').tabs('select', '#sample-tab-2');
于 2012-04-21T20:24:34.377 に答える
5

この関数を使用します。

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>
于 2011-12-09T15:58:12.677 に答える
3

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

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

お役に立てれば！

于 2012-01-19T11:01:58.797 に答える
3

タブのゼロから始まるインデックスを取得する唯一の実際的な方法は、タブセットを構成する各要素 (LI>A s) をステップ実行し、それらの内部テキストを照合することです。おそらくもっときれいな方法で行うことができますが、私が行った方法は次のとおりです。

$('#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 で宣伝されているようには機能しないようです。そのため、タブセットを初期化するために、最初のパスから識別されたインデックスを使用しました。目的のタブを選択した状態で。

于 2010-05-01T03:31:19.993 に答える
3

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

<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 });
于 2014-03-26T17:24:01.790 に答える
1

@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セレクターを使用した「select」の呼び出しをサポートするようになりましたが、タブを作成する場合、「selected」オプションは引き続き数値インデックスのみをサポートします。

私の投票は、私を正しい軌道に乗せるための公爵夫人に行きます。ありがとう！

于 2011-10-24T19:53:41.520 に答える
1

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

于 2009-07-06T15:46:11.107 に答える
1

選択したタブを名前で取得するサンプル コードを次に示します。これが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>
于 2012-03-23T16:26:30.893 に答える