Question

在将内容附加到属于同一容器的3个选项卡时遇到问题。出于某种原因，当我将元素附加到每个选项卡的容器时，在每个选项卡上都会得到一个副本，直到单击该选项卡并再次返回。

这是我尝试执行此操作的示例。

TABS

<div class="tab-content">
    <div class="tab-pane active" id="tabs1" role="tabpanel">
        <div id="container1" class="widget">
        </div>
    </div>
    <div class="tab-pane active" id="tabs2" role="tabpanel">
        <div id="container2" class="widget">
        </div>
    </div>
    <div class="tab-pane active" id="tabs3" role="tabpanel">
        <div id="container3" class="widget">
        </div>
    </div>
</div>

数据和内容

$.ajax({
    url: 'data.php',
    type: 'post',
    dataType: 'json',
    data: {id: id},
    success: function(res){

        var len = res.length;

        $("#container1").empty();
        $("#container2").empty();
        $("#container3").empty();

        for( var i = 0; i<len; i++){

        var content = res[i]['content'];
        var isValid = res[i]['isValid']; //boolean

        $('#container1').append('<div>'+content+'</div>'); //this tab includes all results

        if(isValid){
        $('#container2').append('<div>'+content+'</div>'); //this tab includes only valid results
        }

        if(!isValid){
        $('#container3').append('<div>'+content+'</div>'); //this tab includes only invalid results
        }
    }
});

此示例表明所有数据都在同一数组中，然后有条件地附加到每个容器中。

那么，当我第一次访问每个标签时，会看到以下内容。

“ container1”显示所有内容，但也将所有内容重复两次。（因此，如果我期望每个选项卡有1个结果，container1应该显示3个结果，而是显示6个结果（每个2个结果）。换句话说，它显示的是供容器1使用的内容，还包含供容器2和容器3使用的内容

“ container2”显示“ container2”和“ container3”中的内容，直到重新访问该选项卡为止，然后显示正确的内容。

“ container3”显示“ container2”和“ container3”中的内容，直到重新访问该选项卡为止，然后显示正确的内容。

当我重新访问每个选项卡时，我会看到每个选项卡的唯一内容。

我尝试从不同的数组中提取数据（在服务器端将其分离），但仍然得到相同的最终结果。

我不明白的是，当我重新访问这些标签时，重复项消失了。

预先感谢

Answer 1

由于我没有实现您的标签控件，因此只能假设，但是我认为这是由于您所有的标签都具有.active类，该类将一次显示所有三个标签。例如，如果列表中有6个项目，其中2个有效条目，而4个无效一次，则您将看到总共12个项目，但它们将显示在彼此下方的三个不同DIV标签中。如果您的类.widget没有外部边框或其他分隔符，则可能看起来只是一个元素。

对其进行更改，以使只有一个标签可见，例如“ tab1”标签：

<div class="tab-content">
    <div class="tab-pane active" id="tabs1" role="tabpanel">
        <div id="container1" class="widget">
        </div>
    </div>
    <div class="tab-pane" id="tabs2" role="tabpanel">
        <div id="container2" class="widget">
        </div>
    </div>
    <div class="tab-pane" id="tabs3" role="tabpanel">
        <div id="container3" class="widget">
        </div>
    </div>
</div>

PHP jQuery：选项卡的Append（）将复制内容，直到重新访问选项卡

1 个答案: