3 个数据表分别位于 3 个不同的选项卡上，在单击选项卡后稍后加载时显示在第一个选项卡上.如何解决它

Question

我有一个页面，我必须在每个选项卡下显示 3 个不同的选项卡，有一个 jquery 数据表。但是当页面开始时加载所有数据表都出现在第一页上，但后来单击选项卡时，它会同步 选项卡使用引导程序编写如下：

<div class="panel-body">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab" >Tab1</a></li>
            <li><a href="#tab2" data-toggle="tab" >Tab2</a></li>
            <li><a href="#tab3" data-toggle="tab" >Tab3</a></li>
            <li><a href="#tab4" data-toggle="tab" >Tab4</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab1" class="tab-pane fade in active">
                <div class="row row-border">
                    <table id="Table1" class="display">
                    </table>
                </div>
            </div>
            <div id="tab2" class="tab-pane fade in active">
                <div class="row row-border">
                    <table id="Table2" class="display">
                    </table>
                </div>
            </div>
            <div id="tab3" class="tab-pane fade in active">
                <div class="row row-border">
                    <table id="Table3" class="display">
                   </table>
                </div>
            </div>
             <div id="tab4" class="tab-pane fade in active">
                <div class="row row-border">
                </div>
            </div>
      </div>
</div>

JavaScript 调用是这样的：

<script>
    window.onload = retrieveList;
    function retrieveList() {
        var table = document.getElementById("Table1");
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetTable1",
            data: {},
            contentType: "application/json",
            dataType: "json",
            success: OnSuccess
        });
        var table1 = document.getElementById("Table2");
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetTable2",
            data: {},
            contentType: "application/json",
            dataType: "json",
            success: OnSuccess1
        });
        var table2 = document.getElementById("Table3");
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetTable3",
            data: {},
            contentType: "application/json",
            dataType: "json",
            success: OnSuccess2
        });
    };
</script>

以及后来的OnSuccess功能，我认为如果需要，您不需要，请发表评论。

请帮助我最初所有数据表都出现在第一个选项卡上，尽管我在所有其他选项卡上都需要它。

Answer 1

默认情况下显示所有.tab-pane元素，因为它们具有.in和.active类。

尝试删除这些类，除了其中一个（例如第一个）：

<div class="panel-body">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab" >Tab1</a></li>
        <li><a href="#tab2" data-toggle="tab" >Tab2</a></li>
        <li><a href="#tab3" data-toggle="tab" >Tab3</a></li>
        <li><a href="#tab4" data-toggle="tab" >Tab4</a></li>
    </ul>
    <div class="tab-content">
        <div id="tab1" class="tab-pane fade in active">
            <div class="row row-border">
                <table id="Table1" class="display">
                </table>
            </div>
        </div>
        <div id="tab2" class="tab-pane fade">
            <div class="row row-border">
                <table id="Table2" class="display">
                </table>
            </div>
        </div>
        <div id="tab3" class="tab-pane fade">
            <div class="row row-border">
                <table id="Table3" class="display">
                </table>
            </div>
        </div>
        <div id="tab4" class="tab-pane fade">
            <div class="row row-border">
            </div>
        </div>
    </div>
</div>