jquery-ui 1.10.4中的Capture选项卡选择事件

Question

I'm trying to capture a tab selection event, something exactly like the this jsfiddle from this similar question from almost 3 years ago. The following code works when using jquery-ui-1.8.9 as in the linked jsfiddle:

<script>
$('#tabs').tabs({
      select: function(event, ui){
             //do stuff
      }
});
 </script>
 <div id="tabs">
        <ul>
            <li><a href="#tabs-1">First</a></li>
            <li><a href="#tabs-2">Second</a></li>
            <li><a href="#tabs-3">Third</a></li>
        </ul>
        <div id="tabs-1">
            <iframe src="page1.html" width="100%" height="600" marginheight="0" frameborder="0"></iframe>
        </div>
        <div id="tabs-2">
            <iframe src="page2.html" width="100%" height="600" marginheight="0" frameborder="0"></iframe>
        </div>
        <div id="tabs-3">
            <iframe src="page3.html" width="100%" height="600" marginheight="0" frameborder="0"></iframe>
        </div>
    </div>

I can't seem to find any method that works in the newer version. I'd very much like to avoid going backwards to 1.8.9 here, but it's necessary for me to be able to detect when a tab is selected. Has anyone else run into this issue? I'm sure it's something straightforward but I can't figure it out.

Answer 1

In jQuery UI 1.10.* it's activate rather than select:

$('#tabs').tabs({
    activate: function(event, ui){
        //do stuff
    }
});