gpt4 book ai didi

twitter-bootstrap-3 - Bootstrap 3 选项卡无法正常工作

转载 作者:行者123 更新时间:2023-12-03 09:00:09 26 4
gpt4 key购买 nike

我几乎从他们的网站上复制了代码。该选项卡已完美启动,当我单击选项卡时,会激活新面板。但是,“事件”类不适用于激活的选项卡。
这是代码:

<ul class="nav nav-tabs">
<li data-toggle="tab" data-target="#a" class="active"><a href="#">a</a></li>
<li data-toggle="tab" data-target="#b" ><a href="#">b</a></li>
<li data-toggle="tab" data-target="#c" ><a href="#">c</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane fade in active" id="a"> in tab a </div>
<div class="tab-pane fade" id="b">in tab b</div>
<div class="tab-pane fade" id="c">in tab c</div>
</div>

最佳答案

根据Docs你需要输入一个 id在标题中的每个链接上,该链接需要在 li 内应该没有其他样式,即不需要所有 data-target li 中的东西.您的列表中没有 data-toggleid .

你的 HTML 应该是这样的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
<li><a href="#a" data-toggle="tab">a</a></li>
<li><a href="#b" data-toggle="tab">b</a></li>
<li><a href="#c" data-toggle="tab">c</a></li>
<li><a href="#d" data-toggle="tab">d</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="a">AAA</div>
<div class="tab-pane" id="b">BBB</div>
<div class="tab-pane" id="c">CCC</div>
<div class="tab-pane" id="d">DDD</div>
</div>


根据文档,您不需要任何 Javascript

关于twitter-bootstrap-3 - Bootstrap 3 选项卡无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20917435/

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