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>

Source

Answer 3

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

Answer 4

此代码将在使用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>

使用AngularJS的Bootstrap选项卡

4 个答案: