jQuery UIのタブ：「コンテンツ」の代わりに「ナビゲータ」の子を選択しようとしています

Question

これは約4時間前に調査されましたが、これまでに尋ねられたり答えられなかった場合は謝っています。

jsFiddle：http://jsfiddle.net/3Rx3j/3/

は私が自動的に回転し、タブのボックスを持っています。このボックスには、ナビゲータセクションとコンテンツセクションがあります。タブボタンのリストはナビゲータセクションにあり、リンク先のdivはコンテンツセクションにあります。 タブボタンにはラジオボタンがあり、関連するコンテンツdivが選択されたときにチェックすることができます。直接私の問題に関連しているコードの 次の行：

//$(".ui-tabs-selected > .ui-tabs-nav-item").attr("checked", "checked"); 
$(ui.panel).children(".ui-tabs-nav-item").attr("checked", "checked"); 
alert($(ui.panel).attr("id")); 

上記のコメント行は、ほとんど私が欲しいものを行います。残念ながら、「tabsselect」イベントが発生すると、「.ui-tabs-selected」クラスはまだ選択されている実際のタブに移動していないので、常に一歩先です。 リサーチに基づいて、上記の2行目を試しました。これは、コンテンツペインのdiv内のタブのコンテンツ部分のIDを返します。

関連するコンテンツのコンテナではなく、「tabsselect」イベントを発生させるためにクリックされた実際のボタンを選択する方法はありますか？

読んでいただきありがとうございます。

ブランドン

Answer 1

これはui.indexによってアクセスされます。この数値を 'radioNav'と連結し、チェックされた値をtrueに設定するだけです。これは自動的に他のものをfalseに設定します。これは、一度に1つしか選択できないためです。

デモ：http://jsfiddle.net/3Rx3j/35/

編集：またはよりよい、あなたがそれらを与えてくれたクラスでn番目のラジオボタンを選択します。

$("#headlines").bind("tabsselect", function(event, ui) { 
    $('.ui-tabs-nav-item:eq(' + ui.index + ')').attr('checked', true); 
}); 

デモ：http://jsfiddle.net/3Rx3j/36/

Answer 2

これは大丈夫に動作するようです：http://jsfiddle.net/3Rx3j/34/

クラスのスイッチが瞬間的選択を取得する唯一の方法は、プラグインを変更することである

setTimeout(function(){ 
    $(".ui-tabs-selected .ui-tabs-nav-item").attr("checked", "checked"); 
,500); 

が遅れているので、それは遅延です私は確信しています。

あなたが探しているのは、タブが変わったときに一意のクラスが提供されるため、視覚効果です。 「.ui-tabs-selected」は変更しようとしている無線入力の親です。

$("#headlines").bind("tabsselect", function(event, ui) { 
    var index = ui.index + 1; 
    $('#radioNav' + index).attr('checked', true); 

}); 

、コールバックは現在のタブ（ゼロベース）のインデックスを含んでいるので、あなたのケースでは、それはどちらかでしょう0：あなたは、単に次の操作を行うことができので、あなたは、あなたのラジオボタンのIDを与えてくれた