JQuery：如何在数据库更改上动态重新生成选项卡后保留活动选项卡

Question

我有1个静态选项卡，它是我的默认选项卡和2个动态选项卡，它们是根据数据库记录动态生成的。

在数据库更改时，我使用$('.dynamic').remove(); JQuery remove方法删除元素并动态重新生成元素。

动态标签和内容是根据数据库记录生成的

在首页加载时，会加载1个静态和2个动态标签...

每当在数据库中进行更改时，删除或修改记录， 我必须动态重新生成选项卡并显示其中的内容。

问题是，当用户在动态选项卡上并在数据库中进行更改时， 首先删除所有动态内容，然后再将其添加到页面中。由于这个原因，该选项卡的内容已被删除，并且在用户切换或再次单击选项卡之前，它不会显示任何内容。

我发现的问题是，我丢失了活动标签和内容。这就是为什么每当在数据库中进行更改时，它首先删除所有动态选项卡及其内容，然后再动态添加。

如果我使用$('.dynamic').show()，那么标签的所有内容都会相互堆叠。

有没有办法在数据库更改时维护选项卡及其内容。

OR

使用$('.dynamic').show()并维护标签及其内容。

代码：

var data = JSON.parse(json);
$('.dynamic').remove();

$.each(data, function (arrayId, item) {

     $('.nav-tabs').append('<li class="dynamic" > <a href="#tab' + (arrayId + 2) + '" role="tab"  data-toggle="tab">' + (item.Name) + '</a></li>');


     $('.tab-content').append('<div class="tab-pane dynamic" id="tab' + (arrayId + 2) + '">' +

             // Content Here

     '</div>');
});

我想要做的是在动态删除之前保留显示给用户的活动标签。 如果从数据库中删除选项卡数据，则应选择第一个选项卡。

此问题中没有postback或callback。 当在数据库中进行更改时，服务器将内容推送到所有客户端。

Answer 1

如果我理解正确，一个简单的解决方案是在使用sessionStorage或localStorage重新生成选项卡之前存储活动选项卡（参考storage guide @ MDN）。

例如，您将在选择标签时保存一个唯一标识活动标签的特定属性，例如id，title等，如

sessionStorage.setItem('selected', attributeValue);

重新生成选项卡后，您可以从sessionStorage中检索值，如

sessionStorage.getItem('selected');

并将其用于show()特定标签。

（不能更具体地提供信息）

Answer 2

我针对此特定问题所做的解决方案，当服务器将数据推送到所有已连接的客户端并且实际上发生了PostBack或CallBack时;

我需要做的是保持活动标签引用并删除所有动态内容，并使标签处于活动状态。

要保留活动标签的引用，

var activeTab = $("li.active a").attr("href");

它会返回变量href中活动标签的activeTab值。

然后我按类名dynamic

删除所有动态内容

$('.dynamic').remove();

然后我再次生成动态标签和内容（每当在数据库中进行更改时，动态标签将被删除并再次使用更新的内容重新生成）

以下是动态生成标签及其内容的代码

var data = JSON.parse(json);

$.each(data, function (arrayId, item) {

    $('.nav-tabs').append('<li class="dynamic" > <a href="#tab' + (arrayId + 2) + '" role="tab"  data-toggle="tab">' + (item.Name) + '</a></li>');


    $('.tab-content').append('<div class="tab-pane dynamic" id="tab' + (arrayId + 2) + '">' +

        // Content Here

    '</div>');
});

重新生成后，首先我删除课程“活跃”＆＃39;来自世界各地

$('.active').removeClass('active');

然后获取activeTab变量的长度（如果存在标签参考，则返回 1 ，否则返回 0 ）

var ifExist = $(activeTab).length;

然后一个简单的if-else为我解决问题，

如果存在标签引用，则if块执行并使标签及其内容处于活动状态

此外，它会简单地激活第一个默认硬编码标签及其内容

if (ifExist > 0) {

    $('a[href="' + activeTab + '"]').parent().addClass('active');

    $(activeTab).addClass('active');

} else {

    $('a[href="#tab1"]').parent().addClass('active');

    $('#tab1').addClass('active');

}