一部の非表示タブ（jQuery）で選択したタブのインデックス

Question

タブコントロールがあり、選択したタブのインデックスを取得しようとしていますが、問題があります。選択する前に私はいくつかの隠されたタブがあり、私はこのようなインデックスを取得しています：

Tab1を - TAB2（隠された） - TAB3（隠された） - 私はTAB4のインデックスを取得しようとするとTAB4

、I 1を得るが、私は3（インデックスを0から3）にしたい。

私はこれにui.newTab.index（）を使用しており、非表示のタブは無視します。

ありがとうございました！

を編集します。これは私のコードです：

jQuery("#testTabs").tabs({ heightStyle: "fill", activate: function (event, ui) { 
 
       var index = ui.newTab.index(); 
 
       } 
 
});

それはイベントであります。

Answer 1

jQuery 1.10+を使用していますか？1.8以前のバージョンでは、選択しないと有効になりますか？

Btwあなたのコードにはリンクされたクエリがありません。リンクされたjQでフィドルを作成し、HTMLに追加します。

私は誰かのフィドルに隠れた要素を持たせるようにリファクタリングしましたが、まだ動作しています（コンソールを開いて参照してください）。だから私はあなたの問題が隠されているとは思わない。たぶんdisplay：none？タブよりもDOM内にさえありません。

<div id="tabs"> 
    <ul> 
    <li><a href="#fragment-1"><span>One</span></a></li> 
    <li style="visibility: hidden;"><a href="#fragment-2"><span>Two</span></a></li> 
    <li><a href="#fragment-3"><span>Three</span></a></li> 
    </ul> 
    <div id="fragment-1"> 
    <p>First tab is active by default:</p> 
    <pre><code>$("#tabs").tabs(); </code></pre> 
    </div> 
    <div id="fragment-2"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </div> 
    <div id="fragment-3"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </div> 
</div> 

JS

$("#tabs").tabs({ 
    activate: function(event, ui) { 

     console.log(ui.newTab.index()); 
} 
}); 

this fiddle