JQuery UI 1.11 Set选项卡为active
我有jQuery1.11，几个小时以来，我一直试图将新创建的选项卡设置为active并显示出来。
小提琴手
我还想在选项卡上添加一个"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>回答 3
Stack Overflow用户
发布于 2015-03-12 19:17:54
您已经得到了所需的前半部分:调用.tabs("refresh")将使新选项卡被选中并添加到列表中。您所缺少的只是在刷新选项卡之后设置活动选项卡。查看API文档中的jQuery UI Tabs，我们将看到Tabs中有一个名为"active“的选项。
active 类型:布尔型或整数型 缺省值:0 当前打开的面板。支持多种类型：
- 布尔值:激活为false的设置将折叠所有面板。这要求可折叠选项为true。
- Integer:是活动面板的基于零的索引(打开)。负值选择从上一个面板向后移动的面板。
这将是我们需要改变的选择。查看可用的方法，我们将看到这可以使用option( optionName, value )方法完成，如下所示：
$("#search-tabs").tabs("refresh");
$("#search-tabs").tabs( "option", "active", 0 );由于您的新选项卡被添加到第一个位置，您可以将活动选项设置为零，这将指向新添加的选项卡！
下面是jsFiddle上的一个演示：http://jsfiddle.net/pb39g4b3/。
Stack Overflow用户
发布于 2015-03-12 18:57:12
正如@sphanley所暗示的。使用$("#search-tabs").tabs( "option", "active", 0 );是正确的方法。
此外，您还可以实现如这里所示的关闭功能。
下面是演示链接，包含您所要求的所有功能。http://jsfiddle.net/eeLrgxxt/7/
Stack Overflow用户
发布于 2015-03-12 19:08:35
你可以这样做
http://jsfiddle.net/dm96hvb9/您需要附加“ui-tabs active state-class=”，然后显示匹配的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();})；
https://stackoverflow.com/questions/29017669
复制相似问题
腾讯云开发者
