JQuery UI 1.11 Set tab to active

Question

I have Jquery 1.11 and I have been trying for hours to get the newly created tab to be set to active and show it.

Jsfiddle

I also would like to add an "x" on the tab to close the tab.

I have went through a lot of posts on here and they are mainly for older deprecated methods.

Javascript:

$(function() {
  var tabs = $( "#search-tabs" ).tabs({
        heightStyle: "fill"
    });
    tabs.find( ".ui-tabs-nav" ).sortable({
        axis: "x",
        stop: function() {
            tabs.tabs("refresh");
        }
    });


    $('button#addtab').click(function(){
        var num_tabs = $("div#search-tabs ul li").length + 1;

        $("div#search-tabs ul").prepend(
            "<li><a href='#s-tab" + num_tabs + "'>#" + num_tabs + "</a></li>"
        );

        $("div#search-tabs").append(
            "<div id='s-tab" + num_tabs + "'>#" + num_tabs + "</div>"
        );

        $("#search-tabs").tabs("refresh");
});

});

View:

  <button id="addtab">Add Tab</button>
  <div id="search-tabs" >
    <ul>
    </ul>
  </div>

Answer 1

As @sphanley has suggested. Using $("#search-tabs").tabs( "option", "active", 0 ); is the correct way of doing it.

Further, you can implement the close functionality as shown here.

Here is the demo link with all features you requested. http://jsfiddle.net/eeLrgxxt/7/

Answer 2

You've got the first half of what you want: calling .tabs("refresh") causes the new tab to be picked up and added to the list. All that you're missing is setting the active tab after you've refreshed the tabs. Looking at the API documentation for the jQuery UI Tabs, we'll see that there's an option in the Tabs API called "active".

active

Type: Boolean or Integer

Default: 0

Which panel is currently open. Multiple types supported:

• Boolean: Setting active to false will collapse all panels. This requires the collapsible option to be true.

• Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.

This is going to be the option we need to change. Looking at the methods available, we'll see that this can be done using the option( optionName, value ) method, like this:

$("#search-tabs").tabs("refresh");
$("#search-tabs").tabs( "option", "active", 0 );

Since your new tabs are being added to the first position, you can just set the active option to zero and that'll point to the newly added tab!

Here's a demo on jsFiddle: http://jsfiddle.net/pb39g4b3/.

Answer 3

you can do it this way

http://jsfiddle.net/dm96hvb9/

you need to append the class="ui-tabs-active ui-state-active" and then show the matching div

$('button#addtab').click(function(){
    var num_tabs = $("div#search-tabs ul li").length + 1;

    // remove any active tab
    $('#search-tabs li').removeClass('ui-state-active');
    $('#search-tabs li').removeClass('ui-tabs-active');

    // added the active class to the li
    $("div#search-tabs ul").prepend(
        "<li class='ui-tabs-active ui-state-active'><a href='#s-tab" + num_tabs + "'>#" + num_tabs + "</a></li>"
    );

    $("div#search-tabs").append(
        "<div id='s-tab" + num_tabs + "'>#" + num_tabs + "</div>"
    );

    $("#search-tabs").tabs("refresh");

    //show the active div
    $("#s-tab"+num_tabs).show();

});