twitter-bootstrap-3 – 引导3选项卡无法正常工作

发布时间：2020-12-18 00:15:38 所属栏目：安全来源：网络整理

导读：我几乎从他们的网站上复制了代码。选项卡完全启动，当我单击选项卡时，新面板被激活。但是，“活动”类不会应用于激活的选项卡。这是代码： ul class="nav nav-tabs" li data-toggle="tab" data-target="#a" class="active"a href="#"a/a/li li data-toggle

我几乎从他们的网站上复制了代码。选项卡完全启动，当我单击选项卡时，新面板被激活。但是，“活动”类不会应用于激活的选项卡。
这是代码：

<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中，不应该有其他样式，即不需要li中的所有数据目标。您的列表没有数据切换或ID。

你的HTML将是这样的

<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">...</div>
   <div class="tab-pane" id="b">...</div>
   <div class="tab-pane" id="c">...</div>
   <div class="tab-pane" id="d">...</div>
</div>

根据文档，您不应该需要任何Javascript

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!