How to prevent bootstrap tabs from interfering with angularjs routing?

Question

When using AngularJS and bootstrap javascript tabs, I ran into an issue of where angularjs route would pickup href clicks. In a result, instead of showing a tab, route redirects to location of where tab button is lining to. In short, bootstrap javascript tab is not suppressing default action for tab clicks.

If you aren't already using AngularJS directives for your Bootstrap components, I'd start there. angular-ui.github.io/bootstrap — isherwood
– isherwood, Commented Feb 20, 2015 at 22:29
As mentioned above use the angularized versions of thee bootstrap components from here - angular-ui.github.io/bootstrap — Abhinav Gujjar
– Abhinav Gujjar, Commented Feb 21, 2015 at 5:04

Dimo · Accepted Answer · 2015-11-24 11:29:38Z

4

Just add `target="_self"

See example:

<a href="#tab01"  target="_self" >
    <div class="tab-pane fade in active" id="tab01">show tab1</div>

answered Nov 24, 2015 at 11:29

Dimo

891 silver badge7 bronze badges

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

Collectives™ on Stack Overflow

How to prevent bootstrap tabs from interfering with angularjs routing?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related