JQuery UI Tabs：在第二个位置添加选项卡

Posted 2023-05-08

【中文标题】JQuery UI Tabs：在第二个位置添加选项卡

【英文标题】：JQuery UI Tabs: Add tab at the second position

【发布时间】：2018-12-12 22:10:54

【问题描述】：

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

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

这是我的小提琴：

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()。 append 将在末尾添加选项卡。

嗨！是的，我应该在 jquery ui 选项卡中使用什么来代替在第一个和第二个选项卡之间添加一个选项卡？我的问题是，当我手动添加它时，某些样式不在 li-Tags 上

【参考方案1】：

.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/ 了解有关选择器和所用方法的文档。

【讨论】：

这正是我正在寻找的。谢谢