【问题标题】:Bootstrap tabs aren't working with AngularJS routes. 'data-target' isn't working too引导选项卡不适用于 AngularJS 路由。 “数据目标”也不起作用
【发布时间】:2016-03-03 21:45:20
【问题描述】:

我从 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?谢谢。

【问题讨论】:

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


    【解决方案1】:

    您需要考虑将 Angular-UI 用于此类 Bootstrap 组件。它为您提供 Bootstrap 组件,例如专门为 AngularJS 应用程序编写的选项卡。查看该链接上的“标签”部分。

    【讨论】:

    • 我想要另一个解决方案,但这个。不过还是谢谢。
    猜你喜欢
    • 2015-10-10
    • 1970-01-01
    • 1970-01-01
    • 2015-05-15
    • 1970-01-01
    • 1970-01-01
    • 2016-12-07
    • 2018-04-03
    • 1970-01-01
    相关资源
    最近更新 更多