切换到新标签时，内容显示在当前标签的 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

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

切换到新标签时，内容显示在当前标签的 div 下方

Content appears below the div of the current tab when switched to new tab

javascript

bootstrap-tabs