gpt4 book ai didi

javascript - Bootstrap nav pills - 当第二个 nav pill 激活时,第一个 nav pill 数据仍然存在

转载 作者:行者123 更新时间:2023-11-30 16:00:35 25 4
gpt4 key购买 nike

我正在使用 Bootstrap pill 在同一页面上进行切换。有两个导航丸和两个分别对应的 div。我已经正确构建了第一个 div,并且工作正常。但是当我试图构建第二个 div 时,第一个 div 的内容阻碍了第二个 div 的构建。例如:col-* 类无法正常工作。总之第一个div的数据,虽然不可见,但是当我在第二页时,它仍然存在。

<ul class="nav nav-pills container-fluid" style = "margin-left:10px;">
<li class="active"><a href="#homeTab" data-toggle = "pill">Download Data</a></li>
<li><a href="#metaTab" data-toggle = "pill">Metadata</a></li>
</ul>

<div class="container-fluid tab-content fade in active" id = "homeTab">
....
</div>

<div class="container-fluid tab-content fade" id = "metaTab">
....
</div>

最佳答案

您滥用了 tab-content 类。它应该包裹在所有选项卡周围,并且选项卡应该有 tab-pane 类,如下所示:

<ul class="nav nav-pills container-fluid" style = "margin-left:10px;">
<li class="active"><a href="#homeTab" data-toggle = "pill">Download Data</a></li>
<li><a href="#metaTab" data-toggle = "pill">Metadata</a></li>
</ul>

<div class="tab-content">
<div role="tabpanel" class="container-fluid tab-pane fade in active" id = "homeTab">
...tab 1 content...
</div>

<div role="tabpanel" class="container-fluid tab-pane fade" id = "metaTab">
...tab 2 content...
</div>
</div>

这是关于 Bootstrap 中选项卡的更多信息:http://getbootstrap.com/javascript/#tabs

关于javascript - Bootstrap nav pills - 当第二个 nav pill 激活时,第一个 nav pill 数据仍然存在,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37827989/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com