具有一些隐藏选项卡的选定选项卡的索引（jQuery）

Question

I have a tab control, and I am trying to get the index of the selected Tab, but I have a problem. I have some hidden tabs before the selected, and I am getting an Index like this:

Tab1 - Tab2(hidden) - Tab3(hidden) - Tab4

When I try to get the index of Tab4, I get 1, but I want to get a 3 (index from 0 to 3).

I am using ui.newTab.index() for this, and It ignore the hidden tabs.

Thanks and good coding!!

Edit . This is my code:

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

It's in the event.

Answer 1

Are you using jQuery 1.10+ cause 1.8 and earlier (I think) uses select not activate?

Btw your code has no linked query, make a fiddle with linked jQ and add in HTML while you are at it?

I refactored someone's Fiddle to have a hidden element and it still works (open the console and see). So I don't think your problem is with hidden. Maybe display: none? Than tab is not even in 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