[英]Angular Bootstrap Navigation unable to switch between nav-tabs
I'm using bootstrap navigation in angular application as shown in below HTML我在 angular 应用程序中使用引导导航,如下所示 HTML
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="test-tab" data-toggle="tab" href="#" routerLink="/test" role="tab" aria-controls="home" aria-selected="true">Test</a>
</li>
<li class="nav-item">
<a class="nav-link " id="viral-tab" data-toggle="tab" href="#" routerLink="/viral" role="tab" aria-controls="profile" aria-selected="false">Viral</a>
</li>
<li class="nav-item">
<a class="nav-link" id="user-tab" data-toggle="tab" href="#" routerLink="/user/{{username}}" role="tab" aria-controls="contact" aria-selected="false">User</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="test" role="tabpanel" aria-labelledby="test-tab">
</div>
<div class="tab-pane fade" id="viral" role="tabpanel" aria-labelledby="viral-tab"></div>
<div class="tab-pane fade" id="user" role="tabpanel" aria-labelledby="user-tab">
</div>
</div>
</div>
I'm not able to switch between different nav tabs, it is always the "test-tab"
which is active.我无法在不同的导航选项卡之间切换,它始终是活动的"test-tab"
。 How can I switch between different nav-tabs.?如何在不同的导航选项卡之间切换。?
Try to use routerLinkActive for setting the active class. I have modified your code and removed href attribute since it can cause trouble when not used for navigating.尝试使用 routerLinkActive 设置活动 class。我已经修改了您的代码并删除了 href 属性,因为它在不用于导航时会引起麻烦。
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="test-tab" data-toggle="tab" routerLinkActive="active" routerLink="/test" role="tab" aria-controls="home" aria-selected="true">Test</a>
</li>
<li class="nav-item">
<a class="nav-link " id="viral-tab" data-toggle="tab" routerLinkActive="active" routerLink="/viral" role="tab" aria-controls="profile" aria-selected="false">Viral</a>
</li>
<li class="nav-item">
<a class="nav-link" id="user-tab" data-toggle="tab" routerLinkActive="active" routerLink="/user/{{username}}" role="tab" aria-controls="contact" aria-selected="false">User</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="test" role="tabpanel" aria-labelledby="test-tab">
</div>
<div class="tab-pane fade" id="viral" role="tabpanel" aria-labelledby="viral-tab"></div>
<div class="tab-pane fade" id="user" role="tabpanel" aria-labelledby="user-tab">
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.