javascript - 具有 Ajax 加载内容的 Bootstrap 响应式选项卡

Question

我的网站中有很多用 Bootstrap 设计的选项卡，我尝试使用 https://github.com/flatlogic/bootstrap-tabcollapse 使其具有响应性(此处演示:http://tabcollapse.okendoken.com/example/example.html)

我能够使选项卡响应，但问题是我使用 AJAX 将内容加载到选项卡中(如 https://coderwall.com/p/1lnxba/load-bootstrap-tabs-dynamically )，问题是当调整为小尺寸时，选项卡的整个标记会更改为面板，并且元素的 id 也发生了变化。

那么，由于标记已更改，我将如何使用 ajax 加载这些选项卡内的元素。我不想编写单独的代码来加载这两种情况。

或者还有其他更好的替代方案吗？或者一些不会更改选项卡标记但仍然具有响应能力的解决方案？

提前致谢。

Answer 1

尝试使用Bootstrap's Containers保存 AJAX 加载的内容。

我假设您的代码是这样的(只是选项卡 Pane 位)，但您应该至少使用布局更新您的问题以获得更好的响应。

<div class="tab-pane fade in active" id="home">
    <!-- ... Other Content ... -->
    <div id="ajaxContent" class="container">
        <!-- Where Tab 1 Content would go because it's active -->
    </div>
    <!-- ... Other Content ... -->
</div>

参见Bootstrap's Components page获取您可以使用的类的完整列表。