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

【问题标题】：JQuery: How to retain active tab after regenerating tabs dynamically on database changesJQuery：如何在数据库更改动态重新生成选项卡后保留活动选项卡
【发布时间】：2014-07-14 10:24:40
【问题描述】：

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

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

根据数据库记录生成动态选项卡和内容

在第一页加载时，会加载 1 个静态选项卡和 2 个动态选项卡...

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

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

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

如果我使用$('.dynamic').show()，它会将选项卡的所有内容堆叠在一起。

有什么方法可以在数据库更改时保持选项卡及其内容处于活动状态。

或

通过使用$('.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。当数据库发生变化时，服务器将内容推送到所有客户端。

【问题讨论】：

如果您可以分享更多代码，那将会很有用。但是理论是这样的：在从 DB 重新加载动态选项卡之前，您应该“记住”（例如存储在变量中）当前活动的选项卡。重新加载动态选项卡后，您可以重新激活上一个活动选项卡，或者如果之前活动的选项卡已被删除，则激活默认选项卡。

标签： javascript jquery twitter-bootstrap tabs

【解决方案1】：

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

例如，您将在选择选项卡时在 localStorage 中保存唯一标识活动选项卡的特定属性，例如 id、title 等，例如

sessionStorage.setItem('selected', attributeValue);

一旦选项卡被重新生成，您就可以从 sessionStorage 中检索值

sessionStorage.getItem('selected');

并将其用于show() 特定选项卡。

（无法对提供的信息更具体）

【讨论】：

【解决方案2】：

我为这个特定问题所做的解决方案，当服务器将数据推送到所有连接的客户端并且没有PostBack或CallBack实际上发生了；

我需要做的是保持活动选项卡引用并删除所有动态内容并使以前处于活动状态的选项卡处于活动状态。

要保留活动标签的引用，

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

它将在变量activeTab 中返回活动选项卡的href 值。

然后我按类名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>');
});

重新生成后，首先我从所有地方删除“活动”类

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

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

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');

}

【讨论】：