jQuery UI选项卡:在第二个位置添加选项卡

时间:2018-07-04 12:51:58

标签: javascript jquery jquery-ui css-selectors jquery-ui-tabs

我无法在第一个和第二个标签之间添加一个标签。

按下按钮时,我有一个按钮,一个带有演示内容的新标签应该出现在第一个和第二个标签之间。

这是我的小提琴:

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

1 个答案:

答案 0 :(得分:2)

.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/