1

我有一个页面，我必须在每个选项卡下显示 3 个不同的选项卡，那里有一个 jquery 数据表。但是，当页面首先加载时，所有数据表都出现在第一页上，但后来当单击选项卡时，它会同步，这些选项卡使用 bootstrap 编写如下：

<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>

和 javascripts 调用是这样的：

<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 功能（如果需要，请发表评论）。

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

4

1 回答 1

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>
于 2016-07-08T14:53:31.467 回答