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.

Andy · Accepted Answer · 2017-02-20 13:59:15Z

58

replace href with data-target.

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

edited Feb 20, 2017 at 13:59

Andy♦

50.8k62 gold badges181 silver badges240 bronze badges

answered Feb 20, 2017 at 13:43

Rej

5814 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mr. Developerdude Over a year ago

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

Liam Over a year ago

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

Farhan Ghumra · Accepted Answer · 2016-06-21 11:47:35Z

9

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

answered Jun 21, 2016 at 11:47

Farhan Ghumra

15.3k6 gold badges52 silver badges117 bronze badges

Comments

Richard Edwards · Accepted Answer · 2014-11-10 13:00:05Z

6

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

answered Nov 10, 2014 at 13:00

Richard Edwards

1,3991 gold badge18 silver badges31 bronze badges

Comments

MSH · Accepted Answer · 2017-04-17 05:00:24Z

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>

Saurabh Chandra Patel · Accepted Answer · 2018-05-10 05:42:36Z

6

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>

answered May 10, 2018 at 5:42

Saurabh Chandra Patel

13.7k7 gold badges94 silver badges80 bronze badges

Collectives™ on Stack Overflow

Bootstrap Tabs with AngularJS

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related