使用AngularJS的Bootstrap选项卡

前端之家收集整理的这篇文章主要介绍了使用AngularJS的Bootstrap选项卡前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在使用AngularJS中的引导选项卡时遇到问题.
<div class="tab-container">
    <ul class="nav nav-tabs">
       <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
       <li><a href="#profile" data-toggle="tab">Profile</a></li>
       <li><a href="#messages" data-toggle="tab">Messages</a></li>
    </ul>
 <div class="tab-content">
    <div class="tab-pane active cont" id="home">
        <h3 class="hthin">Basic Tabs</h3>
        <p>This is an example of tabs </p>
     </div>

     <div class="tab-pane cont" id="profile">
       <h2>Typography</h2>
       <p>This is just an example of content 
     </div>

     <div class="tab-pane" id="messages">..sdfsdfsfsdf.
     </div>
  </div>
</div>

问题是,当我选择一个标签,例如Home或Profile时,我被重定向到/ home或/ profile url,而不是显示标签本身的内容.

我有一种感觉,这可以通过指令以某种方式实现,并防止重定向页面主页或配置文件,而是显示选项卡内容.

您可以尝试使用位于此处的Angular UI引导程序组件,http://angular-ui.github.io/bootstrap/

猜你在找的Angularjs相关文章