Retrieving index of Jquery Tabs

Question

Hello I am trying to get index of current selected tab. Alert(ui.index) returns "undefined". Any idea why?

thanks

    <script>
 $(document).ready(function(){
  var $tabs = $("#apttabs > ul").tabs();

  $tabs.bind('tabsselect', function(event, ui) {
   alert(ui.index);
  });
 });
</script>


<div id="apttabs">
    <ul>
     <li><a href="#fragment-1"><span>tab1</span></a></li>
     <li><a href="#fragment-2"><span>tab1</span></a></li>
     <li><a href="#fragment-3"><span>tab1</span></a></li>
        </ul>

    <div id="fragment-1">content 1</div>
    <div id="fragment-2">content 1</div>
    <div id="fragment-3">content 1</div>

</div>

Answer 1

index is not a defined property of the UI DOM element. Also, what event is 'tabselect'? It is not listed as a possible value in the jquery bind document.

Also, what do you want index for? You can determine that from the event target node's href (since you've given incremental hash names in each href).

Answer 2

How about

$tabs.tabs('option', 'selected') instead of ui.index?

Answer 3

It looks like your tabs creation code is wrong in the first place, at least it does not work for me.

It should be var $tabs = $("#apttabs").tabs() and then the ui.index works properly as well.