CODEWITHSUNDEEP
angularasp.net-core
Nebex Elias
Nebex Elias

Reputation: 422

How to prevent angular routing when I click a bootstrap tab link?

I am trying to make a bootstrap tab. The problem is when I click the tab links angular is doing it's own routing and taking me to different route. I want the tab content to be opened not jump to different route.

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a href="#basic" aria-controls="basic" target="_self" role="tab" data- 
        toggle="tab">Vehicle</a>
    </li>
    <li role="presentation">
        <a href="#photos" aria-controls="photos" role="tab" target="_self" data-toggle="tab">Photos</a>
    </li>
</ul>

When I click the Photos link angular changes the route and takes me to different component rather than showing me the Vehicle tab content.

Upvotes: 1

Views: 1581

Answers (1)

Karan
Karan

Reputation: 12629

replace href with data-target as below. Hopefully it will work.

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a data-target="#basic" aria-controls="basic" target="_self" role="tab" data-toggle="tab">Vehicle</a>
    </li>
    <li role="presentation">
        <a data-target="#photos" aria-controls="photos" role="tab" target="_self" data-toggle="tab">Photos</a>
    </li>
</ul>

Upvotes: 2

Related Questions