Bootstrap Tabs with AngularJS

Question

I have a problem using the bootstrap tabs in 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>

The problem is that when I select a tab for example Home or Profile, I am redirected to /home or /profile url instead of showing the content of the tab itself.

I have a feeling that this can be somehow acheived with a directive and prevent the redirect to the page home or profile, instead show the tab content.

Solution 1

You could try using the Angular UI bootstrap components located here, http://angular-ui.github.io/bootstrap/

Solution 2

replace href with data-target.

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

Solution 3

Directive can help you to handle it.

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

Solution 4

Use data-target instead of of 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>

Solution 5

this code will solve the problem while using 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>

View more solutions

Comments

[Lennart Rolland]

Would you care to make a full example of a working tab?

[Liam]

You can easily show a pointer using CSS {cursor:pointer} no need to add additional markup @CaptainFantastic

[Winks]

This helped me in my situation, thank you