我几乎从他们的网站上复制了代码。选项卡完全启动,当我单击选项卡时,新面板被激活。但是,“活动”类不会应用于激活的选项卡。
这是代码:
这是代码:
<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