Question

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

我还想添加＆＃34; x＆＃34;在选项卡上关闭选项卡。

我在这里经历了很多帖子，主要是针对较旧的弃用方法。

使用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标签的the API documentation，我们会看到Tabs API中有一个名为＆＃34; active＆＃34;的选项。

有效

类型：布尔值或整数

默认值：0

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



布尔值：将active设置为false将折叠所有面板。这个   要求可折叠选项为true。



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

这将是我们需要改变的选择。看看可用的方法，我们可以看到这可以使用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 );是正确的方法。

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

以下是包含您请求的所有功能的演示链接。 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();

}）;

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

3 个答案: