Javascript 如何分割和合并jquery UI选项卡？

我正在处理分割和合并jquery UI选项卡

霉菌代码：

$("#content_2").tabs();
$("#content_3").tabs();
var originalState = $("#content_2").clone();
$('#but').click(function(i) {
    $('#content_2 > ul li a').each(function(i) {
        $(this).hide();
        var spanVal = $(this).attr('href');
        var valueText = $(this).text();
        $(spanVal).hide();
        $('#content_2').prepend($('<div id="content_' + i + '"><ul><li class="ui-widget _lngTrans_Translatable">' + valueText + '</li></ul><span id="' + spanVal + '">' + $(spanVal).text() + '</span></div>'));
        $("#content_" + i).tabs();
    });
});
$('#but1').click(function() {
    $("#content_2").replaceWith(originalState);
    $("#content_2").tabs();
    $("#content_3").tabs();
});

$（“#内容_2”）.tabs（）；
$（“#内容_3”）.tabs（）；
var originalState=$（“#content_2”）.clone（）；
$（'#but'）。单击（函数（i）{
$（'content_2>ul li a'）。每个（功能（i）{
$（this.hide（）；
var spanVal=$（this.attr（'href'）；
var valueText=$（this.text（）；
$（spanVal）.hide（）；
$（'content_2'）.prepend（$（'ul>
“+valueText+”
'+$（spanVal.text（）+”）；
$（“#内容"+i）.tabs（）；
});
});
$（'#but1'）。单击（函数（）{
$（“内容2”）。替换为（原始状态）；
$（“#内容_2”）.tabs（）；
$（“#内容_3”）.tabs（）；
});

这里我有两个按钮“拆分”和“合并”，如果我单击“拆分”选项卡并将其内容分开。如果我单击“合并”，选项卡应恢复为原始形式

问题是第一次它工作正常，但第二次我单击“合并”时，原始状态发生了变化并变得异常

请任何人帮助我在Jquery UI选项卡中创建此功能。

如果你需要更多信息，请评论我

---

提前谢谢。

只需更改您的功能即可

$('#but1').click(function () {
   $("#content_2").replaceWith(originalState);
   originalState = $("#content_2").clone();
   $("#content_2").tabs();
   $("#content_3").tabs();
});

这里有更新