Вкладки пользовательского интерфейса JQuery: добавьте вкладку на второй позиции - PullRequest
Новая
       30

Вкладки пользовательского интерфейса JQuery: добавьте вкладку на второй позиции

0 голосов
/ 04 июля 2018

У меня проблемы с добавлением вкладки между первой и второй вкладками.

У меня есть кнопка, когда она нажата, между первой и второй вкладкой должна появиться новая вкладка с демонстрационным контентом.

Это моя скрипка:

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 голосов
/ 04 июля 2018

.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/ для документации используемого селектора и метода.

...