切换按钮可在两个选项卡之间切换

Question

我使用bootstrap显示2个标签，如下所示：

<ul class="nav nav-tabs" role="tablist">
 <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">CLient</a></li>
 <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Pro</a></li>
</ul>

<div class="tab-content" style="width:100%;">
 <div role="tabpanel" class="tab-pane fade in active" id="home">Client Dashboard</div>
 <div role="tabpanel" class="tab-pane fade" id="profile">Pro Dashboard</div>
</div>

我想要一个切换按钮来切换它们，而不是导航标签，就像这样： http://abpetkov.github.io/switchery/

我该怎么做？

Answer 1

您可以使用bootstrap jQuery插件动态选择要激活的选项卡。因此，在切换切换按钮上添加一个单击处理程序，并根据切换按钮的状态选择选项卡。

http://getbootstrap.com/javascript/#tabs