Bootstrap选项卡不适用于AngularJS路由。 'data-target'也不起作用

时间:2016-03-03 21:45:20

标签: javascript html angularjs twitter-bootstrap angularjs-routing

我从Bootswatch网站获得此代码,它应该可以正常工作:

<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab" aria-expanded="true">Home</a></li>
  <li class=""><a href="#profile" data-toggle="tab" aria-expanded="false">Profile</a></li>
  <li class=""><a href="#other" data-toggle="tab" aria-expanded="false">Other</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade active in" id="home">
    <p>Tab home!</p>
  </div>
  <div class="tab-pane fade" id="profile">
    <p>Tab Profile!</p>
  </div>
   <div class="tab-pane fade" id="other">
    <p>Tab Other!</p>
  </div>
</div>

但我正在使用AngularJS路由,因此href链接不起作用,我尝试将href替换为data-target,但它也不起作用。请帮助,有一种简单的方法可以在激活时将Tab类更改为active吗?谢谢。

1 个答案:

答案 0 :(得分:3)

您希望将Angular-UI用于此类Bootstrap组件。它为您提供Bootstrap组件,例如专门为AngularJS应用程序编写的选项卡。查看&#34;标签&#34;关于该链接的部分。