如何在jquery-ui选项卡中添加选项卡然后选择它？

Question

I understand how to add a jquery-ui tab, and I understand how to select a tab by index number, but how can I both add a tab and then select it?

For example, in the following demo you can add a tab, but then you have to click on it for it to be displayed:

http://jqueryui.com/demos/tabs/#manipulation

I'm on jquery 1.4.2 and jquery-ui 1.8rc3.

Answer 1

The 'length' and 'selected' options has been deprecated and removed now, so to select the last tab (which is the one that has just been added) use

$('#tabs').tabs('option', 'active', -1);

This works because if you specify negative values, the tabs are counted from the end backwards starting at -1.

Answer 2

After you have added the tab like the example just use the select method . You will have to know the index of the tab you just added. If you just added it to the end you can use the length method , if not then you already know the index of the tab because you defined it when you added it.

Answer 3

Also, you can use this:

var $tabs = $('#tabs').tabs({
            add: function(event, ui) {
                $tabs.tabs('select', '#' + ui.panel.id);
            }
        });

Docs here: http://docs.jquery.com/UI/Tabs#...immediately_select_a_just_added_tab

However, I'm having a problem where this bit of code only works after the first one that I add... ie: doesn't work for the first one. Can't figure that out...