切换到新选项卡时，内容将显示在当前选项卡的 div 下方

Question

我正在使用Bootstrap动态切换选项卡。我有两个选项卡，第一个选项卡(活动选项卡(的内容在页面加载时动态绑定，当我切换到第二个选项卡时，内容再次动态绑定。不同选项卡的元素一个接一个地显示。如何防止div 一个接一个地出现？

<div id="content">
    <table>
        <tr>
            <td >
                <div id="graphArea" class="startSize">
                    <div>
                </div>
            </td>
            <td id="searchArea">
                <ul class="nav nav-tabs" id="resultList">
                    <li class="active"><a data-toggle="tab" href="#resultsArea">Results</a></li>
                    <li ><a data-toggle="tab" href="#facetsArea">Facets</a></li>
                </ul>
                <div class="tab-content">
                <div class="searchsize" class="tab-pane fade in active" id="resultsArea">
                    <table>
                        <tr>
                            <td>
                                <p><b>Search Results for :</b> <p style="color:green"><b id="searchText"></b></b></p></p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="list-group">
                                    <div>
                                        <table  class="table-hover" id="resultTab" style="word-break: break-all;">
                                            <tbody id="searchResults">
                                            //data is dynamically bound to tbody
                                            </tbody>
                                        </table>
                                    </div>
                                    <div id="pager">
                                        <ul id="pagination" class="pagination-sm"></ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

                    <div id="facetsArea" class="tab-pane fade">
                        <p>Helllo</p>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

Answer 1

从div中删除重复的类属性class="searchsize"，并使其class="tab-pane fade in active searchsize"。它有效。