我的网站中有很多用 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 加载这些选项卡内的元素。我不想编写单独的代码来加载这两种情况。
或者还有其他更好的替代方案吗?或者一些不会更改选项卡标记但仍然具有响应能力的解决方案?
提前致谢。
最佳答案
尝试使用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获取您可以使用的类的完整列表。
关于javascript - 具有 Ajax 加载内容的 Bootstrap 响应式选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32381491/