使用AngularJS的Bootstrap选项卡

Question

我在使用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,而不是显示标签本身的内容.

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

Answer 1

替换href为data-target.

<li class="active"><a data-target="#home" data-toggle="tab" >Home</a></li>

Answer 2

指令可以帮助您处理它.

app.directive('showTab', function () {
    return {
        link: function (scope, element, attrs) {
            element.click(function (e) {
                e.preventDefault();
                jQuery(element).tab('show');
            });
        }
    };
});

<a show-tab href="#tab_1">
    Tab 1
</a>

资源

Answer 3

使用 data-target 代替 href

<div class="page-menu-container">
        <div class="container">
            <div class="page-menu">
                <ul class="nav nav-tabs">
                    <li><a data-toggle="tab" data-target="#Tab1">Tab1</a></li>
                    <li><a data-toggle="tab" data-target="#Tab2" >Tab2</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="tab-content">
        <div id="Tab1" class="tab-pane fade in active"> Tab1 contant
        </div>

         <div id="Tab2" class="tab-pane fade in active"> Tab2 contant
        </div>
</div>

Answer 4

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

Answer 5

此代码将解决使用 Angularjs 时的问题

<div class="tabbable tabs-below" ng-init="selectedTab = 1;">
                        <ul class="nav nav-tabs nav-justified">
                            <li ng-class="{active: selectedTab == 1}">
                                <a href="#" ng-click="selectedTab = 1;">Personal</a>
                            </li>
                            <li ng-class="{active: selectedTab == 2}">
                                <a href="#" ng-click="selectedTab = 2;">Education</a>
                            </li>
                            <li ng-class="{active: selectedTab == 3}">
                                <a href="#" ng-click="selectedTab = 3;">Contact</a>
                            </li>
                        </ul>

                        <div class="tab-content" ng-show="selectedTab == 1">
                        1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </div>

                        <div class="tab-content" ng-show="selectedTab == 2">
                        2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </div>

                        <div class="tab-content" ng-show="selectedTab == 3">
                        3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </div>
                    </div>