Bootstrap 选项卡不适用于 AngularJS 路由。 'data-target' 也不起作用
Bootstrap tabs aren't working with AngularJS routes. 'data-target' isn't working too
我从 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
链接不起作用,我尝试用 data-target
替换 href
,但它没有也不工作。请帮忙,有没有一种简单的方法可以在活动时将 Tab class 更改为 active
?谢谢。
您需要考虑将 Angular-UI 用于 Bootstrap 这样的组件。它为您提供 Bootstrap 组件,例如专为 AngularJS 应用程序编写的选项卡。查看 link 上的 "Tabs" 部分。
我从 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
链接不起作用,我尝试用 data-target
替换 href
,但它没有也不工作。请帮忙,有没有一种简单的方法可以在活动时将 Tab class 更改为 active
?谢谢。
您需要考虑将 Angular-UI 用于 Bootstrap 这样的组件。它为您提供 Bootstrap 组件,例如专为 AngularJS 应用程序编写的选项卡。查看 link 上的 "Tabs" 部分。