JQuery UI 1.11 将选项卡设置为活动

Question

我有 Jquery 1.11，我已经尝试了几个小时来将新创建的选项卡设置为活动状态并显示它。

我还想在选项卡上添加一个"x"来关闭选项卡。

我在这里浏览了很多帖子，它们主要针对旧的已弃用方法。

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");
});

});

查看：

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

Answer 1

正如@sphanley 所建议的那样。使用 $("#search-tabs").tabs( "option", "active", 0 ); 是正确的做法。

此外，您可以实现关闭功能，如图所示here。

这是包含您要求的所有功能的演示 link。 http://jsfiddle.net/eeLrgxxt/7/

Answer 2

你可以这样做

http://jsfiddle.net/dm96hvb9/

您需要附加 class="ui-tabs-active ui-state-active"，然后显示匹配的 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();

});

Answer 3

你已经得到了你想要的前半部分：调用 .tabs("refresh") 会导致新选项卡被拾取并添加到列表中。您所缺少的只是在刷新选项卡后设置活动选项卡。查看 jQuery UI 选项卡的 the API documentation，我们会看到选项卡 API 中有一个名为 "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.

这将是我们需要更改的选项。查看可用的方法，我们将看到可以使用 option( optionName, value ) 方法完成此操作，如下所示：

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

由于您的新标签被添加到第一个位置，您只需将活动选项设置为零，这将指向新添加的标签！

这是 jsFiddle 上的演示：http://jsfiddle.net/pb39g4b3/。

JQuery UI 1.11 将选项卡设置为活动

JQuery UI 1.11 Set tab to active

javascript

jquery

jquery-ui-tabs