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

Question

我正在使用Bootstrap动态切换选项卡。我有两个选项卡，第一个选项卡（活动选项卡）的内容在页面加载时动态绑定，当我切换到第二个选项卡时，内容再次动态绑定 onclick 。不同选项卡的元素显示在另一个之下。如何防止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

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