[英]JQuery UI Tabs: Add tab at the second position
我在第一个和第二个标签之间添加一个标签时遇到麻烦。
我按下按钮时,在第一个和第二个选项卡之间应出现一个带有演示内容的新选项卡。
这是我的小提琴:
https://jsfiddle.net/schludi/egpwnhLq/30/
当我按下添加按钮时,带有示例内容的新选项卡应出现在第一个和第二个选项卡之间。
$( function() {
var tabs = $( "#tabs" ).tabs();
// Actual addTab function: adds new tab using the input from the form above.
function addTab() {
var li = $("<li><a href='#tabs-2'>OP(s)</a></li>");
tabs.find( ".ui-tabs-nav").append( li );
tabs.append( "<div id='tabs-3'>This should appear between first and second.</div>" );
tabs.tabs( "refresh" );
}
// AddTab button: just opens the dialog
$( "#add_tab" )
.button()
.on( "click", function() {
addTab();
});
.append()
将始终在所选元素的末尾插入内容,作为该元素的子元素。
您想要做的是找到第一个选项卡条目,然后在其后直接插入一些内容(但不要作为其子项)。 为此,您可以使用CSS :first-child
选择器和jQuery .after()
方法:
function addTab() {
var li = $("<li><a href='#tabs-3'>OP(s)</a></li>");
tabs.find( ".ui-tabs-nav li:first-child").after( li ); //changed this line
tabs.append( "<div id='tabs-3'>This should appear between first and second</div>" );
tabs.tabs( "refresh" );
}
有关有效的演示,请参见https://jsfiddle.net/egpwnhLq/42/ 。
有关选择器和使用的方法的文档,请参见https://api.jquery.com/first-child-selector/和http://api.jquery.com/after/ 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.