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

Question

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

的jsfiddle

我还想在选项卡上添加“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

你得到了你想要的前半部分：调用.tabs("refresh")会导致新选项卡被选中并添加到列表中。 在您刷新选项卡后，您所缺少的只是设置活动选项卡。 查看jQuery UI选项卡的API文档 ，我们将看到Tabs API中有一个名为“active”的选项。

活性

类型：布尔值或整数

默认值：0

哪个面板目前是开放的。 支持多种类型：

• Boolean：将active设置为false将折叠所有面板。 这要求可折叠选项为真。

• 整数：活动（打开）的面板的从零开始的索引。 负值选择从最后一个面板向后移动的面板。

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

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

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

这是关于jsFiddle的演示： http ： //jsfiddle.net/pb39g4b3/ 。

Answer 2

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

此外，您可以实现此处所示的关闭功能。

以下是包含您请求的所有功能的演示链接。 http://jsfiddle.net/eeLrgxxt/7/

Answer 3

你可以这样做

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();

}）;