gpt4 book ai didi

javascript - JQuery UI 选项卡 : Add tab at the second position

转载 作者:行者123 更新时间:2023-11-30 14:30:58 26 4
gpt4 key购买 nike

我在第一个和第二个选项卡之间添加选项卡时遇到问题。

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

这是我的 fiddle :

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/用于选择器和所用方法的文档。

关于javascript - JQuery UI 选项卡 : Add tab at the second position,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51174166/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com